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Store Name 


Greater London 
AppleCentre City 
AppleCentre Heathrow 
AppleCentre Kensington 
AppleCentre Oxford Street 
AppleCentre West One 
Cancom Croydon 
Chromasonic 
Computer Warehouse 
Facade 

Mac Merchant 
MacWarehouse 

MR Systems 

Trams 

Viewdata 


South East 


AppleCentre Brighton & Hove 
Cancom Brighton 


Tel. Number 


020 7833 0888 
020 8400 1234 
020 7602 9444 
020 7692 9990 
020 7550 7550 
020 8688 2111 
020 8203 8989 
020 8400 1223 
020 8940 4333 
020 7631 2020 
0800 181 332 

020 7700 2121 
020 7544 1234 
020 8979 3000 


01273 889 020 
01273 748 083 


Town/County 


London ECIR 5LJ 
Middlesex 

London W14 8NZ 
London WC1A 1HB 
London W1W 8HR 
Surrey 

London NW4 2HW 
Middlesex 
Richmond 
London W1P 9AD 
Hertfordshire 
London N7 8QJ 
London SE11 SJA 
Middlesex 


West Sussex 
West Sussex 


Store Name 


Cancom Guildford 
Computer Technique 
eVent 

GDN 

Graphic Solutions 
MacEssentials 

Rapid Group 
Systems Support 


South West 


AppleCentre Bournemouth 
AppleCentre Reading 
AppleCentre Thames Valley 
ArtLine 

EPS Bournemouth 
Trendsense 

Western 


Tel. Number 


483 500 500 
245 475 545 
279 818 100 
1424714 110 
1252 322 388 
959 572. 352 
883 744 111 
799 531 777 


seocoococndo 


i) 


202 703 040 
1189 887 766 
189 503 500 
442 260.070 
1276 609 999 
1202 747 484 
17 922 5661 


coooccco 


Town/County 


Surrey 
Essex 
Essex 

East Sussex 
Surrey 
Kent 
Surrey 
Essex 


Dorset 
Berkshire 
Berkshire 
Hertfordshire 
Dorset 
Dorset 

Avon 


Two irresistible offers. 
Money and power 


Give us your old Power Mac and save up to £240 
when you buy a faster, more powerful Power Mac G4 tower. 


Offer applies to customers handing us a Power Mac 4xxx, 5xxx, 6x, 7xXx, 8xxx, 9xxx or beige G3 and purchasing 
anew Power Mac G4 800, 933 or DP 1 GHz between May 15th and July 31st 2002” Rebate amounts vary between 
$120 and £240 (excluding VAT) depending on the Power Mac purchased. Offer can be used in conjunction with 
any other promotion currently available. 


Store Name Tel. Number Town/County Store Name Tel. Number Town/County 
Central 

AppleCentre Broadmarsh 0115 947 2350 Nottinghamshire TCSS 01223 350 216 Cambridge 
AppleCentre Bedford 01234 345 666 Bedfordshire Topology 01494 880 840 Buckinghamshire 
AppleCentre Hull 01482 324 887 Humberside 

AppleCentre Southport 01704 515 100 Lancashire North/Scotland ? ; 
AppleCentre Manchester 0161 272 7700 Gt Manchester AppleCentre Edinburgh 0845 606 2641 Edinburgh 
AppleCentre Oxford (01865 728 700 Oxfordshire AppleCentre Glasgow 0845 606 2641 Glasgow 
AppleCentre Warrington 01925 444 499 Warrington Clockwork , 0 5 243 6054 Leeds 0 
AppleTree Graphics 01527 570 535 Worcestershire FH Brown Bamsley 01226 777 111 South Yorkshire 
Cancom Cambridge 01223 247 111 Cambridge Gordon Harwoods pease Lee 

CS Systems 0161 872 0921 Gt Manchester a ; ore tins 2a d 
Oxford Mac Solutions 0871 717 0000 Oxfordshire aa pee ye iene 
FH Brown Burnley 01282 463 333 Lancashire fe ga a 01661 803 000 Tyneside 

FH Brown Manchester 0161 848 7474 Manchester Sortiek 01904 782 782 York 

Jigsaw 0115 942 2990 Nottinghamshire TMAS : 01383 428 710 Fife 

KRCS 0115 950 5352 Nottinghamshire "TriMac 0114-2724 127 Sheffield 

Litho Supplies 01527 570 101 Worcestershire Kwleeh 

MacXtreme 01543 483 222 West Midlands Channel Islands 

Press Computer Systems 01902 374 757 West Midlands Guernsey Computers 01481 728 738 Guernsey 


“Terms and conditions apply. ©2002 Apple Computer, Inc. All rights reserved. The Apple logo and Power Mac are registered trademarks of Apple Computer, Inc., registered in the US and other countries. 
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TUTORIALS 


Be 


DREAMWEAVER MX 


Dreamweaver basics 


Get to grips with the new features of 
Dreamweaver MX with our ‘getting 
started’ tutorials 


8 14 Create the 
perfect e-zine 


What makes the perfect newsletter? 
Find out how to create the perfect e-zine 
and mail it to your contact list 


6 29 Web streaming 
databases for 
Dreamweaver MX 


Use Dreamweaver UltraDev (now part of 
Dreamweaver MX) to offer streaming 
media on your Website 


© coverco 
Demos, movies and 
resource files on the CD 


-1¢ Exploring the 
fundamentals in 
Flash MX 


Learn how to create vector images quickly 
and easily within Flash, with our range of 
tutorials on perfecting drawing techniques 


.Z' Create motion blur 
in Flash MX 


Follow ourstep-by-step guide to creating 
the motion blur effect in Flash MX 


8 48 Using sound to 


control moves in 
Flash MX 


Create a game where the game characters 
are controlled by shouting into your 
microphone -~ it really works! 


FIREWORKS MX 


© Fireworks MX 
uncovered 


Get to know Fireworks in our‘getting 
started’ tutorial, which shows you the 
highlights of this image editing package 


70) Site prototyping 
with Fireworks MX 


Use Fireworks to design and plan the 
perfect site before you start to develop it 
in Dreamweaver and Flash 


s 74 Animation with 


Fireworks MX 


Follow our tutorial and use Fireworks to 
create animated GIFs with spinning text 
and fading techniques 


a rg et ta ge Sey 


% 


We've got the full version of Flix 7.0. Plus Flash, 
Dreamweaver and Fireworks MX (demos) 


52 Subscribe to CAS 


Want every issue delivered to your door? Then 
take advantage of this subscription offer 


5 Project: Create aVirtual Radio 


Follow our complete project and use Dreamweaver, Flash and 
FE com petition 

We've got a copy of Studio MX to give away to 
one lucky reader. Enter our competition today 


Fireworks to create a Website that is also a virtual radio... 


90 Back issues 


Missed an issue? Better turn to this page fast 
as our back catalogue is selling like hot cakes 


91 Subscribe! 


Save money when you take out subscriptions 
to Computer Arts and Computer Arts Special 


BL pur Ance to Your sive. 


¢60 tips for 9 60 Flix 1.0 98 Next issue 


The 3D on the Web Issue is coming. For details 


Dreamweaver MX Communication Easily convert video clips flick to page 98. On sale 26 September... 


to SWF format with our 


We provide you with 60 tips and Server full, free version of Flix 1.0 


shortcuts to help you work faster : 
Macromedia’s latest product 


comes infor some scrutiny in 
our first look’ feature 


and smarter in Dreamweaver 


COVER ILLUSTRATION compute 


— ee arts specialCONIENIsS 


» PRACTICAL 


Step-by-step tutorials 

All the best advice 

Essential tips 

Great CD software including 
Dreamweaver [MX (trial) 


Win Macromedia Studio MX! 


jaar. 5, oh YO 
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gi File e SWF -— Audio a Video 


| 
| 
| 


| Frame rate: 30.0 
| Color depth: 
| Dimensions: 
| Duration: 


| Average image quality: 


r- Input video properties 


Format: MS MPEG-4 3688 V2 | nae anenne 


|| 
24-bit colar 
320 x 240 


35 seconds 


| 


Output frame options ~ 


Width 


Ath sot eat oe RG a 


Height 


y- Output video options > 


IV Use source dimensions 


SWF movie dimensions 
[~ Use custom SWF dimensions 


| Video framerate (fps): 


Upgrade | 


| 


Dreamweaver MX (dual) 


Use this demo to create the layout for your Website. 
Our extensive guide to Dreamweaverstarts on page 10 


Fireworks MX (dual) 


A taster of the many great features Fireworks MX 
has to offer. Use it with our tutorials from page 66 


Flash MX (dual) 


Learn the basics of animation, and use sound to 
control game characters with our demo of Flash MX 
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Flix Pro 2.5 and Flix lite 2.5 


If you like Flix 7.0, you'll love its big brothers. Try our 
dual demos and then upgrade to the full product 


computer 


ne MX EXTENSIONS 


Dreamweaver MX extensions 
| Choice/eButtonz e-commerce (Dual) 

DMxX Tidy (PC) 

Layout Designer2 by PVII (Dual) 

Cube Stores Designer (Dual) 

Snippets Tool Kit (PC) 


Flash MX extensions 


Flash Expression Panel (Dual) 
HandyTape Component (Dual) 
PHPDataGlue (PC) 

MP3 Volume Control (Dual) 
Fdatahandler (Dual) 

Arckid’s Camera Graph (PC) 


Fireworks MX extensions 
onePixelBevel (PC) 

Colour Glow (Dual) 

Filler Text (Dual) 

Bend (Dual) 

Soft Glamour (Dual) 


For full listings and contacts, see your CD inlay card. For free 
downloads go to [w] www.computerarts.co.uk. 
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ee Now, there's only one event worth attending in the UK. Visit the site or watch for updates in 
Digital Arts World al Arts Festival and D i computer 


9-11 October 2002 pred oces obingvouinebaresicames Ded 6 PTS Net (&) 


Interactive Entertainment in the UK ever. 


The Grand Halll, (@)\Waalele Nowhere else will you find the community of web/new — B08 Symington = 


For more information please contact 


‘ : 3 & : : or Karen Parks — karen.parks@advans 
media designers, graphic designers, illustrators, digital 


video and audio specialists, 3D artists and visual effects 
professionals - all under one roof. 


DBAworld ‘ discreet [AXON PINNACLE 


oe oe = sos Se = — : : : SYSTEMS 
Ue §6=BRRSEGSSENEC! wwwdigitalartsworldco.uk Adobe Alias| wavefront ~~~ :~-----~- 


Sponsors 


The UK’s leading creative event for digital artists 
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Dreamweaver MX 


Dreamweaver is not just a coders’ package. As the 


perfect bedfellow to Flash and Fireworks, it’s an 
essential tool for creating an online presence... 


f you're a designer, 
Dreamweaver may seem like 
the type of package you 
shouldnt really have to 
bother with. Surely it’s geared towards 
Web coders and not designers. That used 
to be the case, but things have changed 
since the launch of Dreamweaver MX. 
Now the software is more tightly 
integrated with its sister packages, 
Fireworks and Flash, and is an 
indispensable tool for any designer 
wanting to present animation and graphics 
inside a Web page. Let's face it, you have 
to use ‘something’ to create your page 
layout, so it may as well be something that 
works well with the other tools you use. 


In this section of our MX special we'll 
be giving you a designer's insight into 
Dreamweaver. Chris Schmidt will be 
showing you the basics of using the 
software, how to create on online photo 
gallery, and how to manipulate type. 

Then we'll be delving into the world of 
mass mailing and showing you how to 
create a great looking HTML newsletter 
with Dreamweaver. 

Our advanced tutorials will show you 
how to create a mini database that will 
update streaming content on the fly. 

Then welll round off this section with 
60 hot tips on how to work more quickly 
within Dreamweaver, in our article on 
special features and shortcuts. 


@00¢ 


Illustration: Bryn Owens [w] www.bluntdog.co.uk 


Dreamweaver basics 
Create the perfect e-zine 
Web streaming databases 


60 tips for Dreamweaver MX 


6 Files on disc 
<=/ Ademo of Dreamweaver MX 
can be found on our cover CD. 


og 


VIEW IMAGE GALLERY » 
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ing out the basics of Web authoring is on most designers’ == 


17.j99 


d promote your work through a simple online gallery... 


0 you've spent years 
developing your own artistic 
identity and managed to 


them to your very own online gallery. 
Before you cringe in terror at the 
thought of having to learn yet another 
$i! master the complexities of dedicated skill in the form of Web 
digital art in Fireworks (or some other authoring, take a minute to browse 


10 | MX 


well known graphics application) and are 
ready to take the design world by storm. 
However, you have one small problem: 
no-one will take you seriously until 
you've got some experience, but you 
can't get any experience until someone 
takes you seriously. 

You could hike your portfolio around a 
handful of agencies risking humiliation 
and rejection, or you could email every 
listing you've found in Google, pointing 


through the following tutorial pages and 
see just how easy it is to get your work 
online in a format that is fast, efficient 
and cheap. 

Before you know it, your email Inbox 
will be filling with so many offers of 
work that you'll be dusting off (and 
finally finding a use for) that PDA and 
deciding on whether that old scooter is 
still cool enough to impress your new- 
found work colleagues... 


Illustration: Fudge Studios Ltd [w] www.fudgestudios.com 


do’ lists. Motivate yourself with our Dreamweaver MX introduction 


Part 1: Starting out 


Plough through our introduction and you'll soon be wondering why you didn't learn Dreamweaver sooner. 


CD files 


You can take the images used in 
this tutorial from the cover CD. 
Although feel free to use your 
own if you think you can rival our 
fictitious artist Pete Mondrian, 
who just happens to be accepting 
commissions at the moment — as 
long as they involve grids and 
coloured cubes. 


Starting out 


Dreamweaver MX is avery 
powerful and complex 
application that simplifies the 
whole Web-authoring process. 
We can only skate over some of 
the features in this basic 
introduction and show you how to 
get started, but by the end you 
should be familiar enough to 
want to figure out how to 
continue your new-found Web- 
authoring skills. 


1 | Before you do anything, you need to let 
Dreamweaver know where the local copy of 
your site is kept. Create a suitably named folder on 
your computer and go to Site>New Site to launch 
the site definition dialog and switch over to the 
Basic tab at the top to get started. 


4 | The main blank canvas dominating the 
interface is a new blank document in which 
you can place the cursor and start typing to add your 
first bit of text. Many standard word processing 
conventions and keyboard shortcuts apply so feel 
free to experiment with your first Web page. 


+ Design 


» Code 


+ Application 


+ File 


Dreamweaver's palettes dominate the right of 
the interface. Clicking their titles will either 
expand or collapse these to show or hide their 
contents. As a new user with design preferences 
ensure the Design and Files palettes are available 
and collapse any others to reduce screen clutter. 


Definition for Unnamed Si 


Sharing File 


Complete the required information clicking on 
Next when you've completed a section. When 
you get to the section about remote server 
connections, unless you know your FTP details, 
choose None for the time being and click OK to 
return to a very sparse looking Dreamweaver. 


Ctrl-B creates bold text 


Ctrl-I for italies 


+ Properties 


The Properties options at the bottom of the 
screen change dynamically depending on the 
selected element. With text selected, for example, 
you'll be able to add formatting such as bold and 
italic, plus you are given basic alignment options 
and the ability to create links to other documents. 


El style.css 
- body 12px Verdana 


td 12ps Verdana 
th 12px Verdana 
i» bodystyle 12px Verdana 
small Spx Verdana 
‘ a¥ 
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8 | On the Design palette, you'll probably become 
more familiar with the CSS Style tab which 
offers access to any style sheets you've embedded or 
linked to your Web page. The Behaviours tab is 
another to keep in mind, as this offers JavaScript 
functions to elements on your page. 


There are common elements to be found 

throughout the MX range and, although each 
application has its own particular purposes and 
features, spending a little time familiarising yourself 
with the interface will give you a distinct advantage 
when looking at other titles in the Studio MX suite. 


8528/85/92 O08 F/B OR/DD 
Q ae 1, | 


783C//0TD HTML 4.01 Transitional //ER"> 


<title Untitled Document¢/title 
cneta http-equive"Content-Type" contente"text/htal; charset+is0-8859-1"> 


GP>CEEL-B creates <otronpbolé&/stcong> text </p> 
WF <p>ceri-1 tor <empstaiicsk/em</p> 


G The top of the interface contains the Insert 
menu bar with its variety of tabbed options. 
Click around the various tabs to see what you can 
add into your Web pages. If an icon isn't too 
obvious, simply hold the mouse over one and its 
bubble help description will appear. 


9 | The Files palette provides a hierarchy of your 
site. In addition to opening files, you can 
rename and drag them to new locations, and 
Dreamweaver will automatically update reliant files 
throughout your site. Among the icons on top of 
this palette are operations for uploading and 
downloading files from your server. > 
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Part 2: Create an online gallery 


How to transfer your files to Fireworks for conversion while Dreamweaver creates the HTML... 


Fireworks 


Although Dreamweaver creates 
the code for your library, it uses 
Fireworks to make the thumbnail 
images which are used to 
preview your images. Be sure to 
have a copy of Fireworks 
installed before you continue 
with the second stage of this 
tutorial. You need no experience 
of Fireworks for this as the 
conversion is run as abatch 
process with no user input other 
than from within Dreamweaver. 


Web addresses 


We call the default file name 
Index.htm as this provides a 
shorter URL in the browser. If 
your homepage had a filename of 
homepage.htm, for example, 
you'd need to send out your 

site address as being 

[w] www.mysite.com/ 
homepage. htm instead of simply 
[w] www.mysite.com. The same 
rule applies to lower level 
folders; this way you can provide 
short logical addresses to your 
site such as [w] www.mysite. 
com/about for information 
about you. 


If you don't have a blank page opened by 

default, create a basic HTML page through the 
File menu. With this page open, go to the 
Commands menu and select the Create Web Photo 
Album option to prompt configuration window for 
Dreamweaver's built-in application. 


[100 100 SII 
P| 

F| 
GIF WebSnap 256 


JPEG - Better Quality 
JPEG - Smaller File 


4 | As a designer you should be familiar with the 
best format to use for the thumbnails and 
original images. In this case use the drop-down 
options to set both options to GIF Websnap 128. 


Once you've completed the required fields, 

you can hit the OK button and sit back as 
Dreamweaver does all the work for you. Fireworks 
is launched and processes the images while 
Dreamweaver creates the code. 


Complete the Title, Subheading and Other 

Info fields with text to head your online 
gallery, then browse to the images directly on this 
month's cover disc to populate the Source Images 
Folder field. For the Destination Folder browse to 
the folder defined as the root of your site. 


The Scale option provides the option to reduce 

the size of larger images should they be 
impractical to download or display on standard 
monitor resolutions in their original dimensions. 
Our images are 500-pixels wide and need no 
amendment, so leave this at 100 per cent or their 
original size. 


8 | Once the process has been completed you are 
returned to Dreamweaver with the main index 
page showing you how the information entered 
previously has been laid out. Use the Preview In 
Browser option under the File menu to see how 
your site works. 


Leave the Thumbnail Size dimensions set to 

100x100 pixels and keep the show filenames 
checked as this will create individual titles for the 
thumbnails which we can amend later. Leave the 
column's width at five as this will contain the five 
100-pixel wide thumbnails neatly. 


Fie //CVMy Documerts/My Galery” |i 
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6 | Selecting the Create Navigation Page For 
Each Photo option creates individual pages for 
your images complete with a basic navigation 
system, enabling the user to move onto the next or 
previous image or back to the main index. 
Unchecking this option will link the thumbnail 
directly through to the image itself. 


Back in Dreamweaver, have a look at the File 
palette and you'll see how the images, pages 
and thumbnails have been organised. 


Part 3: Manipulating type within Dreamweaver 


Times Roman is as stylish as a tank top, so it's time to get formatting... 


Cascading Style 
Sheets 


Cascading Style Sheets are the 
most powerful and efficient 
method of formatting your page's 
general appearance, but the 
principles behind CSS are 
slightly different to HTML. 
Dreamweaver enables you to 
amend both elements without 
having to know the first thing 
about coding or scripting. 
However, with a better 
understanding of what happens 
under the bonnet, you'll 
obviously be more aware of what 
is possible within the 
conventions of Web authoring. 


Hii Paragraph paragraph parag} 
Jie, Paragraph paragraph paragl 


fa The most instant way to improve the 
appearance of the page is through style 
sheets, and fortunately Dreamweaver MX now 
provides a range of ready-built options. Go to 
File>New and select the CSS Style Sheets option 
in the category column. 


Along the bottom of this palette you'll see 

four icons. Click the one to the left which is 
used to attach a style sheet to a document and 
browse to the style.css file making sure the Add As 
Link radio button is selected before clicking OK for 
instant results. 


The title box is contained within a table, a 

common method of controlling page layout. 
With the cursor in a table cell choose 
Modify>Table>Select Table. You can now affect 
elements of the table through the Properties 
Inspector — set the width field marked by a W to 
600 pixels. 


| expanded 


Justified justified, 


big big medium smai 


Bh tue 


Browse through the available style sheets in 

the central column and you are given a 
preview of how a given sheet will work. Scroll down 
the list to select the basic Text: Verdana style sheet 
you want to use and click Create. 


The thumbnail images are lost against a white 

background so to change this go to 
Modify>Page Properties. You could add an image 
by browsing through your system, but we'll keep 
things simple and choose a background colour of 
#CCCCCC and click OK. 


8 | Control the width of the table containing the 
thumbnail images in the same way. To align 
the third row of the title table to the right, place the 
cursor in the cell and click the corresponding align 
button in the Properties Inspector. Then change the 
background using the eyedropper available to the 
BG field. 


¥ Design 


fo 


> Code 


> Application 


Don't panic at the site of code! Simply save the 

file as style.css in the root of your site folder 
and close the window. Back to your gallery 
index.htm file and make sure the CSS Styles tab is 
selected in the Design palette. 
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G The image titles look big and clumsy with 
their file extensions, so simply highlight the 
redundant text and press delete. Select an 
individual title and apply the Small option from the 
CSS palette making sure the Apply Styles radio 
button is selected to attach the Small attributes to 
your selection. 


g You'll need to associate the style sheet with 
pages for the images and so on but, even with 
only a few basic changes and no understanding of 
HTML, it's easy to get started and achieve some 
impressive results in Dreamweaver MX. 
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Expertise provided by Alex 


Michael at Sprite Interactive. 


You can contact Alex at 


[e] alex@sprite.net, 
fw] www.sprite.net 


Create the 
perfect e-zine 


Regular opt-in e-zines are an excellent way 
to keep in touch with your customers, 
encourage their loyalty and increase sales. 
We show you how to produce a successful 
e-zine from start to finish... 


good e-marketing campaign 
has to start with yourcurrent 
site. You need to ask 

i yourself two questions: 
“How should | collect people's e-mail 
addresses?” and “How do| integrate the 
e-zine with my site?” 

The first question is probably the 
most difficult to answer. Normally most 
of a client’s budget is spent on building 
a Website, and what little is left is spent 
on search engine optimisation. The 
reality is, when a site goes live ithas a 
significant audience, but the audience 
soon tapers off into a handful of loyal 
users and a handful of new users. At 
Sprite Interactive, experience has 
shown that you need to keep up toa 
third of your budget for ongoing 
promotions of your site. The way Sprite 
does this is by sending out an e-zine. 
The fuel of the e-zine is the list of e-mail 
addresses collected from subscribers 
on your site. Afterall, if you cant get 
people who visited your site to come 
back again, you've got a big problem. 
The mailing list of an opt-in marketing 
campaign starts empty, and you should 
go for opt-in only list building. You get 
the e-mail address by its owner 
explicitly requesting to be put onto the 


| 


list, and the request is always fora 
specific purpose. If a customer submits 
a form that says “Yes, send me a copy of 
your bimonthly e-zine”, you can then 
add them to your list. You should make it 
clear that they gave you explicit 
permission to be on the list for regular 
mail outs; this is essentially the same as 
‘permission-based marketing’, where 
marketing material is sent only with 
permission and is often personalised. 


Opt-in or double opt-in 


E-mail addresses on an opt-in list are 
not confirmed; anybody can submit 
anybody’s address, and it will be there 
until it is unsubscribed. 

Ona double opt-in list, all e-mail 
addresses must be confirmed before 
they're added. A request for 
confirmation is sent to the submitted 
address, and the owner confirms that 


they're the owner of the e-mail address, 


that they want to subscribe and that the 
address is working. 


The e-zine life cycle 


There is no hard and fast rule about 
the frequency of an e-mail shot. * 
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Direct Mail 1.3.4 


http://homepage.mac.com/jhammer/dm/ 


He He He He 


The best Mac platform bulk mailer. Direct Mail has flexible mail 
merging and a fast delivery engine. It allows you to write messages in 
HTML and plain text and merge them flexibly with fields from the list. 
Addresses can be imported from text files, the OS X address book 
and/or from MySQL databases. 


Product Description 

* Delivery can be internal or external SMTP server. 

* Supports both HTML and plain text e-mails with attachments; the 
message body can be imported. 

¢ Flexible mail merging including several custom fields. 

Uses the Mac OS X spell checker. 

* Imports addresses from Mac OS X address book or a MySQL database. 
Previews messages as HTML, plain text or HTML source. 

* Mac OS X 


Price $25 (£16) 
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MaxBulk Mailer 2.6 


http://www.maxprog.com/MaxBulk.html 


The ideal tool for sending highly personalised messages in both plain 
text and HTML, MaxBulk Mailer is poor when it comes to list 
management and includes no SMTP engine. 


Product Description 

* Sends bulk e-mails through external SMTP server fast with multiple 
connections and threads. 

* Personalised messages using flexible mail merging including custom tags 
and conditional text. 

* Support for plain text and HTML e-mails, insert arbitrary custom header 
lines. 

* Detailed SMTP log and delivery reports. 

* Mail scheduling. 

* Message preview and the ability to send a test message. 

* E-mail Bounce Handler, a separate tool that comes with MaxBulk Mailer 
extracts bouncing e-mail addresses from incoming mail. 

* Mac OS 9.x/Mac OS X 


Price $34.90 (£22) 


sMailing 3.5 Di ie) 


http://www.adnx.com/services/appmac/index2.html 


A capable and fairly flexible bulk e-mail tool, sMailing makes 
sending highly personalised messages easy. sMailing relies on 
external SMTP servers and provides very little list management or 
incoming mail processing. It's good at sending out e-mails but very 
frustrating from then on. 


Product Description 

* Sends bulk e-mails through external SMTP server. 

* Message personalisation through mail merge capabilities including custom tags. 
* Plain text and WYSIWYG HTML editors included; can send HTML 
messages including images. 

* Message preview, detailed sending log. 

* Easy-to-use and flexible list editor. 

* Easy step-by-step interface. 

* Mac OS 9/Mac OS X 


Price $59 (£38) 


Email Merge 2.1 REED 


http://www.sigsoftware.com/emailmerge/index.html 


Simple but effective bulk e-mail application with flexible mail 
merging capabilities, but no internal mail delivery. Message delivery 
is left to another application like Eudora or Outlook Express. This has 
the advantage that you have a full record of sent mail in that program, 
but you lose performance. 


Product Description 

* Sends personalised bulk e-mail messages. 

* Works with an external e-mail client (Outlook Express or Eudora). 

* Supports plain text and (with Outlook Express and Entourage) HTML- 
formatted messages. 

* Create and edit databases inside Email Merge. 

* Imports data from text files or FileMaker databases. 

* Flexible mail merging with unlimited custom fields. 

* Message preview. 

* Mac OS 7/8/9 


Price $30 (£19) 


Depending on your client base you 
might feel that daily updates are 
important. Sprite’s experience with its 
client base shows that bimonthly e- 
mails work best, but whatever you 
decide, stick to it. You should not only 
send your newsletter on the same day 
of the week, each week, but also at the 
same time. Sprite’s traffic increases up 
to 16 fold immediately after an e-zine 
shot. This then flattens out over the next 
eight weeks down to 12% of what it was 
in week one. Over a period of six 
bimonthly issues Sprite aims fora 
steady growth of overall traffic of nearly 
2% per issue. 

So how do you integrate an e-zine 
with your Website? This question 
affects the site architecture and how 
you build and update your site. The 
growth in Website traffic is based on 
providing good landing points from the 
e-zine. If you offer a newsletter as a 
way to keep in contact with your 
customers, then make sure it isa 
newsletter; an e-mail newsletter is 
defined by valuable content, and this is 
what subscribers will expect. An e- 
mail full of sales pitches makes a poor 
newsletter, and the landing points from 
the newsletter need to cover all 
aspects of your site. The idea here is 
Not just to get people to visit your 
homepage but to get them to move 
around the whole site. 

E-marketing is associated with 
personalised bulk mailings, whereas a 
complete e-mail marketing strategy 
consists of the following: 


- You need to be prepared to reply to 
individual customer requests. 

- You need to provide content for your 
e-zine and landing pages on your site. 

- You need to personalise your mailings. 
- You need to have autoresponders. 


Make sign-up easy 

Your e-zine sign-up page should be 
part of the global navigation, because 
not everybody enters your Website on 
its main page and not everybody knows 
from your homepage alone that they 
want to sign up for your newsletter. This 
is why you should put sign-up boxes on 
every page; in other words, build it into 
the navigation system. 


How to design a 
successful e-zine 


The first thing you've got to decide is 
whether to send HTML or plain text 
e-mails, or both. As designers we love 
HTML messages, but the recipients 
may not like them, so you should 
provide both. Put the recipients in 


control and offer a text version of the 
mailings, giving them the choice at the 
point of registration. 


Using a template 


You need your e-zine to be designed in 
the same style as your Website — after 
all, the recipient will finally end up 
there. The way you represent your brand 
will also affect the tone of the e-zine. A 
template has the following advantages: 


- Users know what to expect by your 
branding and design style. 

- Users are interested because of a 
familiar design style — it makes it 
easier to read. 

- If you don't build a template, you 
almost have to redesign your e-zine, as 
new, every time 

+ The generating and editing of content 
is easier if you have a house style. 


Be flexible with your template and try 
to learn from previous mailings. You 
might find that the main article should 
be lower down on the page to allow the 
other articles more viewing time. Once 
you have put together a template try 
new designs and test alternative 
approaches. If you do start tweaking the 
design, find a way of measuring the 
success of changes between different 
designs. You can learn a lot from 
spammers and other people's e-zines, 
so register for a few. A good way of 
doing this is by getting an account at 
Hotmail or another free e-mail service, 
and wait for the material to start 
pouring in. 


Use a bold face for emphasis 


If you send out an e-zine with HTML 
formatting, you have the opportunity to 
both present your brand and grab your 
reader’s attention by applying an 
interesting layout with graphics. But 
you should emphasise important points 
with a bold typeface. Italics do not look 
good onscreen and, unlike in print, 
italic text is not easily legible ona 
computer screen. Underlined text may 
confuse some readers, looks bad and is 
hard to read, on-line or off. Stick to 
system fonts unless you use graphics 
for your text. 


The benefits of HTML 


Check out four of Sprite’s e-zines over 
the page. The designers have gone fora 
striking approach with strong 
headlines and articles that cover all 
aspects of the business. In some 
instances, they sent out an e-zine 
made up of one large graphic. If you > 


Sd 2 
— MailEdge - the ultimate mass email software 


PEE 


MailEdge 2.0 


http://www.hexniche.com/mailedge/ 


Sprite’s second favourite bulk mailer, MailEdge sends plain text and 
HTML bulk e-mails reliably and has a nice interface, but lacks power 
and advanced features. The internal SMTP engine works reliably, but 
it doesn't use multiple threads to deliver messages faster. The mailing 
list set-up is easy to use, but lacks database connectivity. 


Product Description 

Sends bulk e-mails via internal or external SMTP server. 

* Supports plain text and HTML messages, can embed pictures. 
* Simple mail merging with name, e-mail address, date and time. 
Imports e-mail addresses from comma-separated files. 

* Detailed logging. 

© Windows 9x/ME/NT/2000/XP 


Price $38.80 (£25) 


WorldCast 2.1.18 Die ie ie 


http://wwwairlogic.com/worldcast/ 


Powerful, sophisticated and fast bulk mail software with good 
automatic list management but limited mail merging. Mail merging is 
not as flexible and is limited to inserting only the name and e-mail 
address of the recipients. Poor filtering, but this is about the only 
major shortcoming in this powerful and reliable application. 


Product Description 

Sends e-mails in bulk through internal SMTP engine or third-party SMTP 
server. 

* Sophisticated list management and validation. 

© Processes incoming subscribe and unsubscribe requests, bounced mail 
automatically. 

© Editor with HTML syntax highlighting, spell checker and HTML mail 
preview. 

© Crash recovery. 

Imports addresses from text, dBase or CSV files and from various e-mail 
clients’ address books. 

© Windows 9x/ME/NT/2000/XP 


Price $49 (£31) 


‘The indusinal-Strength Bulk Email! Sonware! 


Campaign 5.3.2 CE3EIED 


http://www.arialsoftware.com/ 


Campaign makes use of almost any database system via ODBC, and 
talks to local or remote mail servers or uses its own fast SMTP 
engine. An excellent choice for creating and sending professional 
bulk e-mails, but unfortunately the list management is poor. 


Product Description 

* Sends bulk e-mails at high speed through local or remote SMTP server. 

* Connects to any ODBC data source (eg. Oracle, FoxPro, MS SQL Server). 
* Flexible mail merge and list filtering functionality. 

* Creates and sends both plain text and HTML e-mails with message preview. 
* Bulletproof sending with auto-recovery. 

* Can alternate outgoing message content. 

¢ Campaign scheduling. 

© Windows 9x/ME/NT/2000/XP 


Price $995 (£635) 


eMill 2.0 


http://www.activeplus.com/us/default.asp 


This is Sprite’s favourite bulk mailer. A powerful, advanced and 
flexible bulk e-mail application that tackles the most complicated 
mailing with its excellent scripting language. It can send rich, 
personalised e-mail just as well as receipts or e-mail forms. 


Product Description 

* Sophisticated bulk e-mail application. 

* Connects to existing databases using ADO and SQL or uses Windows, 
Outlook and ACT! 

* Supports multiple users with features such as Windows NT/2000/XP 
security, account quotas. 

* WYSIWYG editor for plain text and HTML messages. 

Powerful scripting language similar to ASP for highly personalised 
messages. 

* Delivery through internal or multiple external SMTP servers. 

* Updates database sets with flexible event handlers and processes 
incoming messages. 

© Windows 9x/ME/NT/2000/XP 


Price $695 (£443) 
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Pre-fill forms on landing pages 

Make life easy for your users by filling in 
the details on forms, especially if they are 
product or order forms. 


Personalised e-mails 

Subscribers are more likely to read the 
e-zine if it is addressed to their first 
name. You should personalise your 
marketing mails to greet and address 
recipients individually. This can be hard in 
arich magazine style, but it’s worth a try. 


Repair broken e-mail address 

If people mistyped their e-mail address 
during the registration process, they 
might not get on your mailing list. You 
could consider treating e-mail addresses 
like passwords: require that subscribers 
type them twice, You can then validate the 
fields automatically. 


Don't send out business offers during 

the holidays 

People tend not to check their e-mails 
regularly when they are on holiday. When 
they return, they will have tons of other 
mailand probably won't give your e-mail 
asecond glance. 


Make sure you give your readers the 
information they want 

Don't forget that users have subscribed 
because they are interested in your 
product. Include the questions and 
answers that are relevant, and your 
articles will be interesting and useful. 


Promotions and competitions are a great 
way of building your list 

If you're giving away freebies, make sure 
that they're compatible with your target 
audience. You want to attract people who 
are interested not just bounty hunters. 


Identifying anonymous subscribers 

Some subscribers will not input their 
name at the point of registration, so you 
can ask them for their name by sending 
them an e-mail. This often works fine, and 
you can also use a regular newsletter as a 
means to find out more about your 
readers, like gender, age and profession. 
Until you know their name you can 
address them “Dear Subscriber”. 


Let your ISP know about your e-mail 
marketing activities 

Be warned that you may slow down the 
service provider and affect everybody 
using their system. You could even crash 
their machine. If your current ISP does not 
agree with your e-mail marketing 
activities, look for another one that does. 
Your Internet connection and the 
connection to your service provider are 
both crucial to your success. 


No audio is better than bad audio 

Sounds and music have a huge impact on 
people's moods. If you combine flashing 
e-mail marketing with powerful sound, 
the effect will be unbeatable. But no 
audio is a lot better than bad audio. Make 
sure it can be turned off easily. 


Reply to requests within one day 

If somebody sends you an e-mail, it means 
they are interested in your products or 
services. If you dont reply promptly, you 
could lose a customer for life. Reply to all 
incoming mail within 24 hours. 


What is the best day to send an e-zine? 

If it's a business-to-business e-zine to be 
read at work, send it on Wednesday or 
Thursday. If it’s a business-to-consumer 
e-zine to be read at home, send it on 
Friday evening or Saturday morning. 


take that approach, rememberto split 
the graphic up into horizontal slices so 
that readers can read across top-down 
almost immediately, and don't forget to 
use alt tags in the HTML. The one 
downside of HTML is its file size and 
that all the images need to be pulled 
from the server. Embedded graphic 
files are not a good idea as they take a 
long time to download and affect the 


Permission Marketing is a merger of 
traditional marketing with Internet- 
specific technologies; it brings together 
branding and consumer behaviour with 
analysis tools and business models. 
Permission Marketing will give you real- 
time statistics that provide you with 
valuable feedback for an up-to-the- 
second view of the success of a campaign 
or new Website update or launch. It is the 
most effective and sustainable marketing 
tool. Sprite’s e-zine campaigns for 
TONI&GUY follow an e-marketing life 
cycle. This begins with a Website update, 
such as a new collection or a new product 
range. An e-zine is then issued inviting the 
recipient to visit the Website. Users feed 
back through competitions or direct 
e-mail. This feedback then becomes the 


fuel for the next e-zine. The next time the 


Sprite uses cutting edge technology like 
Dreamweaver to create its e-zines. 


site gets updated, another e-zine is sent 
out and another cycle begins. 

The result of this strategy is that 
traffic is increased 16 fold at exact times 
in the Website's lifeline (usually within a 
week of shooting the mail). If the content 
is compelling enough, the audience grows 
through viral recommendation. You must 
keep updating your Website or people will 


stop linking through from the e-zine. 


af 


‘The course laste for om ay, wnd tayes place at the Sorite ofticuy in 
phone Oe are net ReAMRRARSEAS 
SG Take this opportunity 
to get up to date, before 
you get left behind! 99 


You can learn a lot from looking at other people's designs, like these from Sprite. Once you've 
decided on the content and look of your e-zine, follow our tutorial to developing and distributing it. 


visual appearance of the page in 
anything that is not an Outlook client. 


Dreamweaver MX 


The main tool Sprite uses for building 
their e-zines is Dreamweaver MX, 
which has both excellent templating 
capabilities and standardised style 


sheets embedded plus Web loading. 


The visual layout capability of 
Dreamweaver MX makes it an ideal 
tool for the designer, and the code-only 
environment feels more like Homesite, 
great for the code junkies. You will need 
to make absolute links to your assets on 
the Web, and Dreamweaver does this at 
a click of a button. Dreamweaver will 
also help you in customising you e-zine 
for PDA download. 


Part 1: Developing an e-zine 


We show you how to put your e-zine ideas on a template and format it for the Web... 


Finder File Edit View Go Window Help 


Mand Vichal Tasamahon 


Now you need to design your e-zine. Use an 

application like Photoshop to design the page 
and provide a visual basis for developing it in 
Dreamweaver. You need to keep the width down to 
600 pixels as the viewer will be looking at it through 
an e-mail client, which may not accommodate any 
more width. 


test ToniBcuy salon 


First of all you need to come up with the 

content for the design to be built around. Use 
our main article to come up with ideas on creating 
e-zine content to promote your products/services. 


[ @ Dreamweaver file Edit View Insert Modify Text Commands Site Wi 
i Wane sour 7 


We then inserted another table inside the left- 

hand cell of the main table to hold the main 
content, and entered a Cellpad Value of 8 and a 
Cellspace Value of 4. Inside this table we built three 
further embedded tables in cells and created a cell to 
the right to hold the left-hand text column. 


This table is split into three cells, with the top- 

left and left-hand cells being given background 
colour black to create the black lines you see 
between all the tables in the finished version 


Dreamweaver File Edit View insert Modify Text Commands Site Window Help 
TSG Ezine Template ZINE] source bent") 


Use Dreamweaver MX to create the template 

for your e-zine. You will need to build it using 
tables into which the text and images can be 
inserted. Our example is made by initially creating 
one main table to hold everything. 


All of the main headings for the TONI&GUY 

e-zine were created as .gif images in 
Photoshop and inserted into place in Dreamweaver. 
The main images were then inserted into the page. 
These were crunched down in Photoshop from the 
originals and saved as .jpg files. 


Ixplorer File Edit View Go Favorites Tools Window Help $8 


8 | The next step is to replace all the image links 

with absolute links, so that the e-zine can go 
out to the Web and pull down the pictures. Upload 
the e-zine assets, and save it as a new file with the 

absolute links in. Sprite usually develops an online 

and offline version of the e-zine. 


All that remains now is to type the text into the 
e-zine from within Dreamweaver, and then add 
any hyperlinks using the Link pane of the Properties 
panel with the text highlighted. Remember to 
preview your work to check it’s okay in a browser. 


[1 TAG Ezine Template 


a « 
Fe 


"CHECK OUT THE 
New RANGE OF 
PRODUCTS 


“Beautiful, feminine and 
aspirational... 


seeing is believing® 


Now check the online version of your e-zine in 
a browser to be sure that all of your links work. 
After this you are ready to send it. > 
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Part 2: Dispatching your e-zine 


Use an e-mail application to send your e-zine to subscribers... 


<4 [pony Wl es & 


Please eries the message Fiom and the auject 


Please enter your new mailing ororect name and path 


“Zor cee 


Pathe [C\My Documents\eMil Projects \Ezinaluly Sy 
Optional Message Template: 
More Files. 


Newletter [Html with specific akermnate Text) en! 
Newletter (Html) emt 


FSpacnic@epnieney 
[Computer Arts Same Ezine July 


“Beautiful, feminine and 
aspirational... 
seeing Is believing” 


The next window is used to specify the name 


and e-mail address that the message will appear 
Mailing Project and click OK. Then give your project to come from and the subject for the message. 


rt | As an example of e-mailing software we have Start eMil/ and select File>New. You will be 


chosen eMili Pro from Active+ Software. presented with a list of items to create. Select 
You can download a trial version from 
[w] www.activeplus.com. 


anew name and click Next. When you've entered these details click Next. 


New eMill Mailing Project Wizar 


ekimmaites 
ar X jie wei @ | 


Please select the data source lype you want to 
use with thie mailing 


‘ne Cnr ert a | 


tone 
= 

es 

ee 

ed 

id 

~— 

Ca aT 

Orenten [5 


F Convert =  wmmage rte 


Excel Spreadsheet (* ws) 
JAccess Database [" mdb} 

B) Text Files (" txt, *.cev) 

WA Windows Address Book (". wab} 


& Import fiom unstructured text files (him, bt. etc} 
Advanced ADO (Otacle. SQL Server, etc... 


"Beautiful, feminine and 
aspirational. 
seeing is believing" 


To import the HTML content select 

Project>New Content and, on the resulting 
window, select the ‘Create new content from file’ 
mailing. The main project window is used to tab. Enter the path and file name of your HTML file 
eMill allows a wide range of source data including set the parts of the mailing. The Contents tab is in the File name field. To make the HTML the main 
Excel spreadsheets and Access database files. For used to edit the e-mail message, the Receivers tab message content, make sure the ‘Content is the 
this example we will specify our own data, so select displays the recipients for the mailing, and the message note’ checkbox is checked and click OK. 
‘I don't have a database, create one for me’, finally Preview tab is used to preview the message prior When prompted, select Yes to replace the existing 
click Next and Finish on the following screen. to sending. message body. 


Then you will be asked to select a data source The wizard created the basic template for our 
that contains the recipients for the e-mail. 


8 ‘| Selecting the Preview tab allows you to see To send your finished e-zine, select 


your finished e-zine. From this tab you can File>Publish & Send, select the ‘Publish, render 
also send yourself a copy of the e-zine to test that it mails and start sending them immediately’ option 
is set up correctly. To do this select Project>Send a and then click Publish. This will then send your 
test message, then enter your e-mail address and message to your chosen recipients. To review the 
click Send. If the message you receive is as you sent messages select File>Queue and select your 
intended then you can go ahead and send the project name. This view shows all the details of the 
e-zine to all your recipients. e-mails sent and received. EEE) 


Now that we've got our message content, we 

need to add the recipients to send it to. Select 
the Receivers tab and select Project>Record>Add 
New to enter the details of a new recipient. Repeat 
this for each recipient you want to send the e-zine 
to. All recipients will appear on the list. 
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make it easyspace for: 


domain names webhosting 
easy on your pocket 6asy service 
from £3.50 _ = from £30.00 


per year _ per year 


rchive 


ecommerce 
easy action 


WWW.easyspace.net 


The UK’s largest domain name registrar offers service, expertise eas S ace 
and value for money - all backed with reliable, robust technology. 


Put our size and strength to work for you domain names - ecommerce - webhosting 


_ Best shopping site _ Best new media agency 
Best gaming service Best online marketing 
5s 2 Best site for broadband 
Future Publishing, the company that brings you Computer Arts every Best search engine/directory  _Best web development 
month, launched i Future Awards _ Best dial up ISP design software 
a eee UK impel _ Best broadband ISP _. Innovation of the year 
_ Best business web host . @-business of the year 
Best consumer web host 


Last year’s awards clocked a staggering 35,330 votes. Now, that’s a 
tough act to follow, but we’re confident that you guys are up to the 


—— FUTURE UK 


a) n02 : 


Vote now 


Which companies are providing the best services for broadband 
users? Who’s leading the way in web design? What’s your favourite 
shopping site? With 13 different categories to choose from, there’s 
something for everyone, so vote now. 
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Web streaming databases 
for Dreamweaver MX 


Since Dreamweaver and U/traDev merged, you can create high-end 
database-driven applications in an environment you're familiar with... 


here is a wealth of enhanced 
features in the database 
element of Dreamweaver, 

/ and we'll show you how to 
put together a database-driven 
application which enables you to manage 
and show Web streams. 

We're making a movie Website with 
loads of video streams to show and 
manage. You can go the donkey route 
and manually embed all the clips in their 
own pages and link them up, or do it the 
smart way and create an application 
which can create new sections on-the- 
fly, display data about the video stream 


(Synopsis, Director, Length, etc.) and 
choose to view either the high or low 
bandwidth versions of the Web stream. 

This advanced tutorial requires some 
rudimentary understanding of the 
Dreamweaver interface and general 
controls. You'll also need to know basic 
Web design, such as how to use nested 
tables, and be familiar with the 
Macromedia Exchange Website. 

Please note that we have created this 
tutorial specifically for PC users, but you 
can find full instructions on how to set up 
Part 1 on a Mac within the help files on 
the CD under ‘Connecting to databases’. > 
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Part 1: Laying the groundwork 


Before we can start, we need to set up our database connections... 


Personal Web 
Server 


Personal Web Server operates 
differently for different versions 
of Windows. For this reason, you 
may need to start up Personal 
Web Server manually before you 
can create a recordset within 
Dreamweaver. If the text reading 
‘Set up testing server’ has a tick 
by it then PSW or IIS is already 
running. If there's no tick, you'll 
need to start things up manually. 
To do this, simply carry out steps 
1 and 2 from part 5 before you 


create the first recordset. 


Mx is new and has great features, but that — 

unfortunately — doesn't mean you get a magic 
wand that can sort out your database connections 
and the rest. We have to set up this part first so we 
can link to the database and use the connectivity 
features. Open Dreamweaver MX and create a New 
Site, from the Site menu. 


a | 
Hecho feo 
tee ( jfeerrver 


ibe flfrerrrce 


Vated Lobe Te) jar FCCC 
Adelante Fifeccrrce 


To save your eyes some wear and tear, we 
suggest you go to Page Properties in the 
Modify menu and tone down the screen to prevent 

retina burn while you work. To do this, set 
background to 000000, links to FFFFCC, visited 
links to and active links to CCFFCC. Click OK and 
type CA streamer in the title box 


‘Us DSN Sytem DEN | Fae 05% | Seve} Trxcre| Comecion Pecira| About | 


Click Add. You will get a list of weird-sounding 

file types. Select Microsoft Access Driver.mdb. 
Don't worry if you haven't got Access installed 
because you don't need it. A new box pops up. 
Now, you're not actually inside Dreamweaver yet — 
but you are using part of the set-up controls for 
ODBC databases, which you can find manually in 
the Control Panel 


Call the site Streaming Application. You should 

be able to locate the root folder within 
C:\Inetpub\wwwroot\streaming application as this 
is where the NT server emulation software is stored, 
and this is needed to emulate a Web server. You 
may not have this directory as standard, as you 
have to install it separately from your Win 98/ 
NT/2000/ME or XP CD-ROM. Perform a search on 
the CD-ROM for Inetpub and install the relevant 
EXE file. You will then have the directory. Set the 
testing server to ASP VBScript, and set testing access 
to Local/Network, using the same directory. 


After all of the prefatory material in the HE 
file, the BopY element contains the genuin 
that the user sees in the browser window ( 
browsers know how to speak to users), Bel 
Bopy element was the place where page auth 


2 peeyise 
up the site's ty 


4. Create a Connection by clicking on + button abo 


Press Ctrl+Shift+F10 to access the database 

set-up options. You need to connect to a 
database, which is included on the CD in the 
Tutorial\Streaming (Streamer.mdb). At this point, 
you should copy the database to the Streaming 
Application folder and place it in a directory you 
create called data. Now click the + icon, circled 
above, and select DSN (Data Source Name). 


eT} 


8 | Type dsnStreamingApplication in the DSN 
name box. Click the Select tab, where it says 
Database. Navigate to the Access Databases you 
copied from the CD to the data directory you 

also created, which can be found in 
C:\Inetpub\wwwroot\streaming application 


Meth lie| rep wmrncstoneoneg exon ky 


‘Tee ates arate tr 
tT ae ee 


Click OK. Now save the empty page that is on 

your screen as default.asp. Then go to the Site 
menu, and select Edit Sites. Select the Streaming 
Application site and, inside site map layout, navigate 
to the default.asp page. Click OK, and return to the 
empty blank page. Change the URL prefix to 
http://localhost/ 


User DSN SystemDSN | Fle DSN | Diivere| Tracing | Connection Pooing | About | 
System Data Sources; 


Driver do Mictosoft Access (". mdb} 
bigimp.dsnShorts Driver do Mictosoft Access (*.mdb} 
Compass Travel Microsoft Access Driver (*.mdb} 
ECDCMuse Microsoft Access Driver (".mdb} 
GlobalCar Microsoft Access Driver (*. mdb) 


‘An QOBC System data source stores infatmation about how to connect to 
the indicated date provider, A System dats source te vieible to all users: 
on this machine, including NT tervices. : 


In connection name, type the following: 

connStreamingApplication. Then click 
the define tab and then the new tab labelled 
System DSN. 


iva Source Naewe (O5N), 


Click OK three times. You should be back 

at the initial DSN box. Select the 
dsnStreamingApplication from the drop-down box 
and click Test. With a rub of the green and some 
technical jiggery-pokery, you'll get a lovely box 
informing you that a connection has been made 
successfully. Wonders never cease! Now you're 
ready to create the actual application. 


Part 2: Content display and support for multiple streams 


Setting up the display and enabling multiple streaming... 


Bandwidths 


In the database, there is a link to 
one streamed video file: good old 
Arbuckles Ales, from a few 
Specials ago. For your own site. 
you will need to change the 
values in the database to 
whatever is the absolute link 
(including http://) to yourown 
streamed file. Don't forget to 
make different links to a high 
and low bandwidth version of 
your streams as this will reduce 
server strain and also benefit 
your audience's different 


requirements. 


Ai] = | document Type ASP vESeret 
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hf Tables 
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Cj On the right of the screen, you can see our 
connection. Expand the tables, and the table 
shortsdetails. This is the name of the table in the 
database which contains all the film information 

It is assumed that you are most likely to be 
streaming short film content, rather than a two- 
hour long epic, and this is reflected in the table 
name. It contains entries for film name, length, 
genre, director, synopsis (which presently contains 
Latin to fill space), age rating and two URLs, one for 
the high bandwidth stream and one for the low 
bandwidth stream 


4 | Now, set up some nested tables so that they 
look like the set-up in the screenshot. The 
specifics don't need to be identical, but we have 
made space for Title, Director, Age category, Genre, 
Film length and Synopsis. The Synopsis should be 
the largest area, and has potential room for 65,253 
characters — although a paragraph or two should be 
enough under most circumstances 


ERT TE 


Now, select the bottom right-most table cell 

and press tab twice. This will give you two new 
rows. In the bottom row, type View low bandwidth 
stream and View high bandwidth stream 


Rows: [1 Cell Padding: [0 
Columns: [1 Call Spacing: [0 


Width: [600 fries =] 
Border: 10 


Now we want to lay out how things are going 

to look on the screen. We want to remove the 
horribly plain looking background. Copy the file 
Background.jpg from the Tutorial\Streaming folder 
on the CD to a new folder called images, within the 
application's root folder. Create a table, with 0 Cell 
Padding and Spacing, 1 column and 1 row. The 
table should be 600 pixels wide and 800 pixels high 


G The final heavily technical part for this section 
requires you to set up a Recordset, which is a 
selection of records from within a table of a 
database. Fortunately, it's less tricky than it sounds 
Click the Bindings tab on the right-hand side of the 
screen, under the application heading. Click the + 
tab and select Recordset. You will be presented with 
a pop-up box. Type rsStreamingApplication in 

the Recordset name box and select the 
connStreamingApplication from the connection 
drop-down. Click Test. If you get a screen full of 
data, you're there; if not, go back over the 

previous steps: 


Recordset [FsStreamngAppication = 


Show © [iG Records at » Tene 


(@ inf Records 


8 | Now click and drag select from just before 
where you typed in Director, right down to 
the bottom right at the end of where you typed in 
View high bandwidth stream. Click the Server 
Behaviours tab on the right-hand side of the screen, 
click the + icon and select Repeat Region. Select 
three records and click OK. This will repeat the 
selected elements three times. 


3 | Select the table and, in the Properties dialog at 
the bottom of the screen, click the bg folder 
and navigate to the background jpg image. Also set 
the horizontal Cell Alignment to left and the vertical 
to top. This will act as the basis for our nesting tables 


BAKO Geesesadez 


Click OK to return to normal Dreamweaver 

space. Expand the recordset which has now 
appeared in the right-hand side of the screen. This 
data can now be directly placed on to our design, so 
drag and drop Director from the recordset next to 
Director on the design and so forth 


CE 
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View low bandwidth stream 


ea Next Filing 


9 | Underneath the table, type in Previous films and 
Next films. Select the text for Previous films and 
click the + icon in the Server Behaviours tab. Select 
Recordset Paging, which holds the commands for 
scrolling through data within the database (or more 
specifically, the active recordset). For the previous 
text, select Move To Previous Record and for next 
films, select Move To Next Record. This enables you 
to view three film descriptions, and cycle through all 
records in the database 
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Part 3: Streaming displays 


The finer details of coding and streaming your displays... 


Extension 
embedding 


Beware when using embedding 
extensions, as some of the older 
extensions from the exchange 
are not compatible with 
Dreamweaver MX. Generally the 
code is still good, but trying to 
apply the extension causes an 
internal error. If this is the case, 
open your previous version of 
Dreamweaver, use the extension 
and cut and paste the code back 
into the pages you are creating 
with Dreamweaver Mx. It's a bit 
problematic, but many of the 
older extensions are being 
updated so that they will be 
compatible with the new version. 
Thanks to wonderful Microsoft, 
whether or not this kind of error 
occurs depends largely on which 
of the four operating systems you 
are working on (and, yes, you 
guessed it, which service pack 
forthe relevant operating system 


you are using). 


Time for a quick visit to the Macromedia 

Exchange. Go to [w] www.macromedia.com/ 
exchange and log in. Download the Auto Resizable 
Open Window and Close Browser Window 
extensions, all free of course. While you're here, 
choose one more extension for later in the project. If 
you want to stream QuickTime, get a QuickTime 
Embedding extension; if you want Windows-based 
streaming (AVI or ASF/ASX) or Real Media streaming, 
get the equivalent. We are using progressive 
QuickTime streams, as these don’t need a special 
server to host them on. We are also using Quicktime 
Object by Computer Arts stalwart, Brendon Dawes 


X - [CA streamer (streaming application/default*)] 


width stream width 


4 | To make the text look like it’s a real link, select 
each of the texts and use the Underline 
command in the Text menu, under Style. Change 
the text colour to FFFFCC — you do this by selecting 
the text and changing the colour by clicking the 
circled box. 


Now for the money shot. Drag the actual link 

for filmfilelinklow from the Recordset to 
anywhere on the display screen. From the View 
menu, select Code and Design. Select the light blue 
text we just dragged on to the screen. You will see 
the text highlighted in the Code view. Now press 
Ctrl+X to cut the ASP link. We want to place this link 
where the blahblahblah.mov (or the relevant movie 
name you typed in to the extension earlier) is. 
Instead of playing a specific movie, this will then 
play whatever the value was in the Recordset. Ah 
ha, you see where we were going now! 


AL Delay “Sir tom aco 
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We want to create a link so that when we click 

on the two view texts we can open up a new 
browser window, with none of the usual cluttering 
rubbish on it. Fortunately, the extension we 
downloaded (despite a rating of one out of five - 
which is unfair given how useful the extension is) 
does just that. Press Shift+F3 to access the 
Behaviours palette. Select the first view text and add 
the behaviour Auto Resizable Open Window. Make 
the new window 320x240 and open the URL 
display_low.asp which we will create shortly. Do the 
same for the other view text, but this time open the 
behaviour display_high.asp. 


Close Stream window, 


Believe it or not, that’s almost the bulk of the 
display section done. We just need to add 
some sneaky commands, so that the right video will 

come up in the display pages. Save the default.asp 
and open display_low.asp. You should have the 
relevant embed function installed, so use it and type 
in blahblahblah.mov or any random filename. This is 
not yet important. We have used the dimensions 
240x180. Centre the movie. Below the movie, use 
the Close Browser Window behaviour we 
downloaded from the exchange. 


fee 


Spa 


8 | Now comes the final bit of tricky code work on 
the display page. We need to filter which 
record is passed from the previous page to the 
display page, otherwise the movie displayed will 
always be the first movie in the database - 
obviously not much good for a movie-streaming 
site, if you can only watch the one film! Double- 
click the Recordset so the options open again. 


Recordset (rsStreamingApplication} 
Repeat Region (tsStreamingApplicatior 
Dynamic Text (rsStreamingApplication| 


Now change the onMouseover action to 

onClick by using the drop-down box, 
otherwise you will open the viewer window every 
time your mouse scrolls over the text. Create two 
new pages from the File menu, one named 
display_high.asp and one named display_low.asp. 
Give them the same colour scheme as we set up for 
the basic display page, as in part 1, step 4. 


Now, we need to create another Recordset for 

use on this page. This will handle the URL from 
the database and pull up the correct movie link. Click 
the Bindings tab and create a new Recordset, Call it 
rsDisplayLow. Use connStreamingApplication as our 
connection and for columns, select all (this isn’t 
strictly speaking necessary — you could select ID 
and filmfilelinklow instead — but if you want to add 
extra functionality later on, you will have to modify 
the Recordset). 


Close Strea) 


Namal [7sDisplayLow 
Connection: |cornStreamingAppliction =] efine.,. 
Tabits | shortsdetatis Ra 
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9 | We will now use SQL (pronounced sequel) to 
filter the correct information. Fortunately, SQL 
is not nearly as tricky as code heads would have you 
believe. In most situations, you only need to set a 
value equal to, less than or greater than to get the 
info you are looking for. In this situation, we want 
the Recordset to use one record which has a value 
equal to that which was selected on the first page. If 
you don't follow — don't worry, simply select ID (the 
unique database value) in the filter drop-down box. 


8S a | 
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Now repeat for the display_high.asp, but 


don't repeat the steps — save time by using this 


method. Click Save As from the File menu and 
change the word ‘low' to ‘high’. Now select Find 
and Replace from the Edit menu. Replace the word 
‘low' with the word ‘high’ in the current documents 
source code. Press Replace and there you go, almost 
unfathomably fast! Close the pages and re-open 
default.asp 


11 | The final step for making the application 
entirely working and functional is to add a 
form. This can be done at the start or the finish; it's 
simply a matter of personal preference. Insert a form 
between the outside bounding table and the inside 
table, which houses the database-driven elements. 
Call the table stream and drag and drop the entire 
database display table inside the form. Now select 
the form, by clicking inside the inner table and 
clicking on the circled form text. 


In the Form Properties dialog, change ‘post’ to 

‘get’. This means that when a form action is 
carried out, it transfers a value to the URL parameter 
of the following page — which is why on database- 
driven sites you often see ? 343535 following a URL, 
the 343535 (or whatever) has been passed from the 
previous page using the get parameter. And that, 
apart from some tweaking, is that. 


Part 4: Whistles and bells 


Everything is in place, so let's add some finishing touches... 


Site maintenance 


To maintain the site, simply open 
the database, You can open an 
Access database in almost every 
database software that exists by 
opening the table ‘shorts’ and 
simply adding new data. This new 
data is instantly reflected in the 
application. Alternatively, you can 
add a mini content management 
system by using the insert, amend 
and delete commands ina new 


series of pages. 


‘Stow Region If Recordeat ts Empty 
ndwidth stream ‘Show Region IF Recordset ts Not Eety 
‘Stow Region IF Not Frst Record 
‘Shs Regpon If Last Record 
Showy Region IF Not Last Record 


When you're on the first set of three films, you 

can't go to the previous three films as there 
aren't any. To fix this, select the light blue previous 
films text and from the Server Behaviours menu, 
select Show Region>Show Region if not first record. 


2 Repeat the steps for the next films’ but this 
time, select Show Region If Not Last Record 
This is basically reverse thinking, but it works. This 
means that when you are at the last records, the 
next films link will disappear, and vice versa for the 
previous films. 


g Final touch: a nice Cascading Style Sheet, to 
make sure it looks lovely on all browsers. Press 
Shift+F11 and create a new style. Call it stream and 
save as stream and simply make it Arial and 10 point. 
Select all text, attach the style and you're done. 


Part 5: Testing the application 


Let's test our creation and make sure everything works okay... 


Storing streams 


You can store video streams on 
any kind of server, with 
progressive streams from 
QuickTime being the staple of 
people who don't want to pay to 
host on a special server. 
However, by hosting your Real 
Media, QuickTime or ASX/AVI 
streams ona server specifically 
made for the purpose of serving 
streams, the streams will load 
much faster and more people can 
access the streams you display at 


any one time 


Personal Web server, or IIS (Internet 

Information Server) is used to preview the 
pages. This acts as your very own Windows NT 
server and needs turning on before you can 
preview. You definitely have this installed if you 
have the C:\inetpub\directory on your computer. If 
you haven't got this automatically running (depends 
on your OS) then do a search for PWS.exe in 
Explorer. For NT/2000 users, the usual location for 
this is C:\WINNT\SYSTEM32\INETSRV. 


RESSS Ream 


= ea on 

Double-click the file PWS.exe from Explorer to 
open the application. Click Start, if this is not 

automatically engaged. Click Advanced and Edit 

Properties. Make the directory path 

C:\Inetpub\wwwroot\streaming application and 

enable Write and Read access. 


Blimey. That was a tough one, but well done — 

you have created a gobsmacking Web 
streaming film application. Press F12 and check out 
your handywork. EEE 
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Rg DIGITAL ARTS WORLD 


¢ 


Digital Arts World 
plays host to a 


number of 


significant events 
on the creative 
calendar, 
including the 3D 
Festival film 


screenings and 


INTERACTIVE OS 
ENTERTAINMENT 


Entertainment 
AWAR ; 


Piers. ok Lo al Awards, which 
in association with 


Sapient 


take place on the 
evening of 
Thursday 10 
October. These Awards will recognise the 
finest talents in the fields of games and 
online design, multimedia, broadcasting 
and publishing, with nominees vying to 
win prestigious bronze BAFTA masks. You 
can book tickets for the Awards by calling 
[t] 0207 292 5818 or by emailing 


[e] ieawards@bafta.org 
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_ keynote speak 


d better... 


ere at Future Publishing, staff on 

all our digital art magazines - 

Computer Arts, Computer Arts 

Special, Cre@teOnline and 3D 
World - are hard at work organising the 
Digital Arts World event. The show takes 
place between 9-11 October at the Grand 
Hall, Olympia, London, and all our readers 
are invited. As the successor to Computer 
Arts LIVE, Digital Arts World now 
incorporates the Digital Media World show, 
as well as the 3D Festival and the London 
Effects and Animation Festival (LEAF). With 
the combined force of all these events 
behind it, DAW promises to be Europe's 
premier creative show in 2002. 


Top-name graphic designers 
The main exhibition floor at our event will be 
separated into special creative villages. 
Number one on the list for Computer Arts 
Special readers will be the Graphic Design 
Village, home to the Computer Arts stage. 
From this stage, you'll hear presentations by 
rereuped graphic 


for new media design; and a special Q&A 
session with members of the audience. Each 
day of the show, the Cre@teOnline stage will 
host discussion panels where top designers 
and industry experts will be arguing out 
critical issues such as the future of Web3D, 
the pros and cons of collaborating with other 
agencies, and how to get and keep clients. 

And 3D World willalso have a stage within 
the 3D Village, from which you'll be able to 
grab tips, advice and inspiration relating to 
applications like 3ds max, Maya and Cinema 
4D. Additional areas of the show include 
Digital Video and Digital Audio, so no matter 
where you go within the Digital Arts World 
exhibition, you'll be able to network with 
other designers and creative people, try out 
new hardware and software, and evaluate 
various relevant services. 


Animation and special effects 


Within Digital Arts World, we're hosting the 
com ned 3D peavey ind London Effects 
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SYSTEMS 


www .pinnaclesys.com 


Tickets and information 


@ Three-day pass to 3D @ One-day pass to 3D @ Three-day pass to Digital @ One-day pass to Digital @ Student day is Friday 11 
Festival/LEAF Conference Festival/LEAF Conference Arts World exhibition and Arts World exhibition and October: £8 in advance, £12 
(includes entry to DAW (includes entry to DAW stages: £18 in advance, £24 stages: £12 in advance, £16 on the door for students. 
exhibition and evening exhibition): £195 + VAT on the door. on the door. 
activities): £350 + VAT 


@ Group concessions are 


also available. 


Digital Arts World | 9-11 October 2002 | Olympia, London | For tickets and further info visit: 


[w] www.digitalartsworld.co.uk 
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HUT A FACE TO YOUR SITE./ 


— 


60 tips for 


Dreamweaver MX 


Moving to Dreamweaver MX? We have 60 great hints and 
tips for new users, developers and designers to help you 
get the most from the new version... 


reamweaver is the editor most often 
Chosen by people looking for professional 
results from their Web work, and it’s 
packed with features aimed at a range of 
users. In this feature, we're going to look at 
what's new or important in Dreamweaver MX for 
evelopers, designers and new users. We've split the 
tips up into these categories so that you can easily 


Choose a mode 

When you first launch Dreamweaver MX, 

y you'll be prompted to choose which mode to 
run it in. Choose the Dreamweaver MX workspace as 
recommended in the dialog, but don't choose the 
HomeSite option; this option is intended for coders. 


Create a folder 

Dreamweaver works best if you create a 
folder to contain your site, and then define it 
as a site within Dreamweaver. Create a folder where 


Workspace Setup 


choose the workspace layout ote mast confotble wih ¥ 


The first time you launch Dreamweaver MX, you'll be prompted 
with this dialog which allows you to choose a workspace. 


find the information that is most useful for you. 

Of course, many of the tips over the next five 
pages are relevant to everyone, so it’s well worth 
reading all of them to widen your knowledge of 
Dreamweaver and perhaps pick up some new ideas. 
Whether you’re moving to Dreamweaver MX from a 
previous version or from another Web editor, you’re 
sure to find these tips useful... 


Tips for new users 


you wish to keep your site, then choose Site>New 
Site. Give the project a name and specify the location 
of the folder you created using the Local Root Folder 
browse button. 


} } View invisibles 

ji ; There can be many important elements 

i within a Web page that don't show up in the 
browser. Dreamweaver shows these ‘invisible 
elements’ using a variety of small yellow icons. To 
ensure that you’re seeing everything you need to, 
choose Edit Preferences, go to Invisible Elements and 
turn on all the checkboxes. 


Editable templates 

Maintaining a site is much easier if it’s 
created using Dreamweaver templates. 
Templates control page appearance across all the 
pages that use them, but allow you to create editable 
regions for the unique content on each page. Any page 
can be saved as a template by choosing File>Save 

As Template. Create editable regions using 
Modify>Template >New Editable Region. 


Form tabs 
When you're designing a form, the best way 
is to create a form tag using Insert>Form, » 


if] 


{ 


il 
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and then create a two-column table inside the form 
area (Insert>Table) to help you align the form elements 
and text labels. Press Tab in the table to move through 
the cells and add rows as needed. Ensure that all the 
form elements are inserted inside the table cells, and 
everything will work correctly. 


; 


Use tables for basic layout 
6 Dreamweaver enables you to insert fixed 
u position layout boxes called Layers using 
ineereeLagee Hass may seem like they’ll be great for 
designing your page, but don't use these for basic 
layout tasks as they can lead to many problems. It’s 
much better to use tables, which you can create using 
Insert>Table, or the layout table view (View>Table 
View>Layout View). 


; 


Cascading Style Sheets 
i i 7 Try not to use the text formatting options for 
a font, size and colour that are presented in the 
Properties palette when you're working with text, as 
these options use the deprecated FONT tag element in 
HTML. It’s much better and more controllable to use 
Cascading Style Sheets (CSS), which allow you to 
precisely and easily control page formatting across the 
site. Choose Window>CSS Styles to start working with 
them, but stick to the basic type options until you 
really know what you're doing. 


Dreamweaver offers a new untitled 

document window each time you start the 
application, but this isn't especially helpful when most 
of your work is on existing pages or pages created from 
Templates. To stop the untitled document appearing by 
default, you can set only the site window to open on 
start-up by choosing this option in Edit>Preferences, 
General category. 


i 33 Changing default settings 
Vi 


} } HTML basics 

{i i 9 If you don't know HTML, it’s a good idea to 

consider learning the basics to help you get 

the best from Dreamweaver. We don't want to spend all 
day typing code, but neither can we pretend that the 
code isn't there. One of the best ways of learning is to 
work with the split code view open, so that you can see 
the tags being created as you work. 


fut) Creating documents 

" Once you've created a template for your 
Website, you need to create pages based on 
it. To create a document from a template in 
Dreamweaver MX, choose File>New... and switch to 
the Templates tab in the New Document dialog. You'll 
find the templates listed by site. Make sure that 
Update Page When Template Changes is selected 
before you click Create. 


fi Pre-built designs 
Dreamweaver MX now includes a range of 
pre-built designs that you can use as a basis 
for your own designs. To create a page based ona pre- 
built design, choose File>New... and then select one of 
the pre-built page options in the List. 


} Cell selection 
When you're working in tables, you can apply 


a wide range of attributes to cells in the 


Properties 


Drag the crosshair icon beside the link field in the Properties into the Site palette to create links to other pages in your site. 


tables, such as cell alignment, background images and 
background colour. If you're finding it hard to select a 
cell, try Control-clicking (Command-clicking on the 
Mac) on the cell or its contents. 


i Selecting groups of cells 
If you need to apply text formatting or cell 


attributes to a range of cells, Dreamweaver 
MX allows you to select a group of cells at the same 
time even if they aren't adjacent so that you can make 
the changes in one go. Try Control-Shift-clicking 
(Command-Shift-Clicking on the Mac) to select 
several table cells. 


} Synchronise feature 
When you have made changes to your site 


that you would like to publish to the live 
server, Dreamweaver offers you a Synchronise feature 
that will work out which files need to be updated on 
the live site. Choose Synchronise from the Site menu 
in the Site palette to preview a list of the changes to 
be made. 


} Previewing pages 
Don't be fooled into believing that what 


Dreamweaver shows you is what you're 
actually going to get in the browser. Sometimes it’s 
close to what you'll get, but it could be wildly different. 
That's why you need to preview your pages in the 
browser as often as possible — press the F12 key on the 
keyboard to quickly preview the current page in your 
preferred browser. 


f : Standard toolbar 
If you’re used to using toolbar buttons for 
tasks such as saving, copying and pasting 
like in Microsoft applications, you can turn ona 
standard toolbar in Dreamweaver for easy access to 
these commands. Just go to View>Toolbars>Standard 
to turn the standard toolbar on or off. 


t Simultaneous views 
One of the best things about using 
Dreamweaver is the ability to show the code 


and design at the same time — choose View>Code and 
Design to see both views simultaneously. This is a great 
way of both learning HTML and becoming more in 
control of your documents. 


fk] Hyperlinks 

{ When you have the site window docked to 
the side of your screen, you can create 
hyperlinks on the page by highlighting the text or 
image that you wish to link, and using the drag-and- 
drop tool to point to the page you want to Link it to. 
Hover over folders in the Site panel without 


releasing the mouse to expand the folder and view 
the contents. 


Top 3 TechMotes 


Cornmmon questions about 
Dreamweaver 


Dreamweaver Mx dynamic FAQ 


Changing and adding file extensions 
recognized by Dreamweaver Mx 


Search Support site: 


The new Answers panel offers a co-ordinated view of help 
available to you, bringing together both local and online 
resources in one place. Use the drop-down menu to explore 
what's available. 


9 Useful information 

Use the Answers panel to easily locate 
information about, and resources for, 
Dreamweaver. If you have a live Internet connection, 
you can view tutorials, the latest technotes, search the 
Macromedia support site, learn about the latest 
extensions, share tips with other users, and access a 
variety of online content from one convenient location 
within Dreamweaver. 


i 


Different browsers may show your pages differently; 
that’s just the way Web design is. It’s tempting to 
assume that the view in Dreamweaver is the right 

one, and that the browsers that don't match up are 
getting it wrong. The reality is that the browsers are all 
right; they are all valid views of your HTML document 
that someone, somewhere will be seeing. In fact, the 
only view that can be said to be genuinely wrong is the 
one you see in Dreamweaver, because no-one will be 


using Dreamweaverto view your pages. This means 


that you need to install as many versions of as many 


different browsers as you can, and make sure that 
your pages are useable in all of them, though they may 
look slightly different. Once they're installed, you can 
add the browsers on your system to Dreamweaver's 
Preview in Browser menu. Choose File>Preview In 
Browser>Edit Browser List, then click the plus button 


to add each browser to the list. 


Tips for designers 


In the Layout Table view, you can add, edit and move tables and 
table cells using a familiar, box-based metaphor. 


H Precise positioning 
For areas of the page where precise design 


control is required, try using the Layout Table 
mode for tricky bits such as aligning sliced images. 
This allows you to draw table cells freely within an 
outer table. Don't expect HTML text or rules to align 
precisely with images, though, as these will appear 
differently in different browsers. 


i Nested tables 
Try to avoid using Layout Table mode for the 


overall page design; you'll find you're able to 
work more accurately and create better pages if you 
learn to design pages using nested tables instead. 


H j Tag selectors 
i 7 3 When you're working in pages that use 


1 nested tables for design, it can sometimes be 
difficult to select the right part of the page to edit. Just 
click on text or an image within the table, and then use 
the tag selector at the bottom of the document window 
to help you select and work with individual tags. 


| | Assets panel 
‘ j 4 Dreamweaver allows you to work with 


images, colours, links and other commonly 
used elements within the site using the Assets panel. In 
this panel, you can view and insert images or other 
media from anywhere in the site in a single view. 


To quickly clean out font tags and other 
deprecated mark-up from older pages 
before applying CSS styles, use the commands in the 
HTML Styles panel. Select the text on the page, and 
choose View>HTML Styles. Click Clear Selection 
Style and Clear Paragraph Style to clean up the text. 


Hi} 5 Cleaning up text 


Managing on-screen space 

By docking all the palettes to the edge of the 
screen, Dreamweaver's new MX layout 
makes it easy to access a wide number of features 
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Work quickly and easily within layouts that use nested tables by 
clicking in the content and then clicking different tags in the tag 
selector to highlight different areas that you wish to edit. 


while managing on-screen space effectively. You can 
click the title of a panel group to hide the panels within 
and make more room for other panels. You can also use 
the F4 keyboard shortcut to hide all the panels or 
reopen them. 


' ] Make interface text bigger 
| 7 If you’re working on a large monitor, reading 
aE some of the small text in the Dreamweaver 
interface can be difficult. If you find yourself peering to 
read things like the URLs in the link field, go to 
Edit>Preferences, click on Accessibility and turn on 
Make Dreamweaver use Large Fonts. 


i Dreamweaver shows the table structure with 
+e a grid of dotted lines, which is helpful when 
editing the page. When you want a more accurate 
preview, though, use the keyboard shortcut Control- 
Shift-I (Command-Shift-l) to hide the edges as 
needed or turn them back on. 


Hi } 8 Hide/show edges 


} f Favourite colours 
i P Working with the Web safe hex colours can 
be confusing and difficult, especially when 
you're working to a restricted palette. To make it easier 
to find and apply colours, you can create your own 
named Favourite colours using the Colours section of 
the Assets panel. 


fi Faster table editing 
Dreamweaver delays its display of changes 


to the table structure on the page until you 
click somewhere else, which supposedly makes 
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Named colours can be created in the Colours section of the 
Assets panel. Any colour in the main list can be added as a 
Favourite and given a unique name. 


editing faster on older computers. This can be 
infuriating if you spend time trying to fix layout 
problems that aren't really there. To improve the 
feedback when editing tables, choose 
Edit>Preferences, go to General, and turn off the 
option Faster Table Editing (Deferred Update). 


} Applying classes 

fl When applying named styles in CSS 
(classes) through the CSS Styles panel, 

Dreamweaver may choose to add the class attribute to 

the wrong tag. To prevent this from happening and to 

make the applying of classes more precise, use the tag 

selector to apply style sheets. Just Right-click 

(Command-click on the Mac) on the appropriate tag 

in the tag selector and choose the class you wish from 

the contextual menu. 


H Customising panels 
Dreamweaver MX offers the new MX palette 


layout, which enables you to keep palettes 
open but minimised while docked on the right-hand 
edge of the screen. You can customise the panel layout 
by moving panels between panel groups using the 
palette menu, or split them off into new panel groups 
with names of your own choice. 


fined Enabling the mini-launcher 

If you miss the mini-launcher that used to 
occupy the bottom-right corner of the 
document window and offered shortcuts to frequently 
used panels, you can turn it on again using 
Edit>Preferences, clicking on Panels, and choosing 
Show icons in panels and launcher. It’s not so useful in 


the new MX interface, though, which is why it isn't on 


by default. 
4) Dreamweaver offers a range of new 
document types in the File>New... dialog. 
However, it quickly becomes irritating having to go 
through this dialog if you just want a basic HTML page. 
To bypass the dialog when you do the Control-N 
(Command-N on the Mac) keyboard shortcut, choose 
Edit>Preferences, click on New Document in the 
categories, and turn off the option for Show New 
Document Dialog on Control-N. 


} Quick spacer gif 
To quickly create a spacer gif, go to 
q Edit>Preferences>Layout View and choose 


Create beside the option Image File. Dreamweaver 
will create a 1 pixel by 1 pixel transparent GIF file 
named spacer.gif which you can save in the location 
of your choice. 


t Hide invisibles 
Sometimes the icons for invisible elements 


can throw off the way that Dreamweaver 
previews the page in the design view. Rather than hide 
everything including table borders, which makes it 
hard to edit the page, you can hide the invisible 
elements alone by choosing View>Visual 
Aids>Invisible Elements. > 


Bypassing dialog boxes 
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fh Switching Code and Design panels 
When using the Code and Design view that 
shows the layout and code at the same time, 
it’s often easier to work with if the code is at the 
bottom. Choose View>Design View on Top to switch 
the two panels around. Dreamweaver remembers 
this setting until further notice, and many designers 
prefer it. 


f Displaying attributes 

When using CSS, Dreamweaver doesn't 

display many of the attributes available. Use 
the Reference panel to check which browsers support 
a given attribute, and be sure to check in both IE and 
NN browsers. If the attributes you want to use display 
badly in Netscape 4.0, consider putting the style rules 
that don't work in Netscape in an external style sheet 
and link to it using @ Import, which isn't supported in 
Netscape 4.0. 


t Fireworks compatibility 

If you use Macromedia Fireworks to 

create GIF or JPEG images for use in 
Dreamweaver, you can select an exported image on 
the page in Dreamweaver and click Edit in the 
Properties palette to make changes easily. If you keep 
the Fireworks native-format PNG files within the site 
folder, Dreamweaver will automatically launch the 
correct source file and then export new images with 
your changes. 


Don't upload more than you need to; take control of 
what gets published with the new Cloaking feature in 
the Site palette. 


Areally handy tip for designers creating sites with 
Dreamweaveris to use the cloaking feature to 
prevent you from uploading files or folders that you 
don’t need once the site is published. Files such as 
original PSD and PNG files can actually be stored in 
the site for convenience. This is really useful if you're 
using Fireworks in conjunction with Dreamweaver, 
because to get the best integration between the two 


products you need to store all the source files in the 


site folder along with the exported images. Just 


Right-click (Control-click on the Mac) on the file or 
folder in the Site panel that you wish to prevent 
Dreamweaver publishing, and choose 
Cloaking>Cloak from the contextual menu to 


prevent it being published. 


Tips for developers 


Choosing your workspace 

When you start Dreamweaver MX for the first 
time, you can choose to work in the 
Droamesaversind workspace. You may wish to choose 
HomeSite/Coder style workspace mode if you're a 
developer, which places the panels at the left of the 
display instead of the right. This is similarto the layout 
in HomeSite and other HTML editing packages. 


Locating code 

To quickly locate a piece of code in the 
document, turn on the split view that shows 
the code and design views at the same time 
(View>Code and Design) and select the item on the 
page that you're interested in. The code view will scroll 
to the correct location and highlight the relevant code. 
The tag selector is also a great way of rapidly 
highlighting the right place in the code. 
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Dreamweaver MX ships with loads of useful snippets 
for you to add to your code. Better yet, you can add 
some of your own... 


Dreamweaver MX offers a new Snippets panel that 


allows you to insert a wide range of useful items 


without coding them yourself. Choose from a diverse 
selection of items including: self-clearing form fields, 
image randomisers, pop-up tool tips, and functions to 
read and write cookies. To use them, just open the 
Code panel group and bring the Snippets panel to the 
front. Each snippet has a short description listed 
beside its name. As you will see, some are intended 
to be inserted as a block of code where you need 
them; others are constructed to wrap around a 
selection. You can open each one to see what it 


contains before you apply it. 


Code Hints 

Dreamweaver's pop-up Code Hints feature 
works as you enter code, offering 
suggestions for tags, attributes and values. To reopen 
the Code Hints pop-up window once you've entered 
code, place the text insertion point in the tag, attribute 
or value and press Control-Spacebar. 


Quick references 

Use the Reference panel to quickly explore 
HTML, CSS, JavaScript, Cold Fusion or ASP 
tags and syntax when your reference books aren't to 
hand. You can click in any tag or attribute in the code, 
and click the Reference button in the toolbar to bring 
up a description of that item and its usage. 


Search and replace 

Dreamweaver offers powerful site-wide 
search-and-replace functions, which can 
work in the content or in the code. It even supports 
advanced features such as Regular Expressions. 
However, site-wide replace operations can't be undone 
in documents that are closed, so before you carry out 
your replace, make a copy of the site folder so that you 
can restore this version if necessary. In both Mac and 
Windows, it takes only seconds to do a simple copy 
and paste of the site folder that can save you hours if 
something goes wrong. 


Syntax colouring 

Dreamweaver now maintains different 
syntax colouring options for different types 
of document. You can customise the syntax colouring 
for each document type in Preferences>Code 
Colouring and choosing Edit colouring scheme. 


H j } Direct previewing 

j 8 One of Dreamweaver's most useful features 

i lets you preview without committing the 
changes to disk first. However, there are times when 
this can be a pain, and you wantto preview without 
saving to a temporary file. Now, you can choose 
Edit>Preferences, click on Preview in Browser, and 
turn off Preview using temporary file to preview 
changes to documents directly. 


Deleting tags 

When you wish to delete a pair of tags from 
the code, it can sometimes be tricky locating 
tie right closing tag to delete. Instead of hunting 
through the code to identify corresponding opening 
and closing tags, use the tag selector to delete tags; 
just Right-click (Command-click on the Mac) on the 
offending tag in the tag selectorand choose Remove 
Tag from the contextual menu. 


i Back up your settings 

If you have many sites set up in 

Dreamweaver, you should be rightly 

concerned about losing all the passwords and access 
details if there's a problem on your disk. In 
Dreamweaver MX you can now export your site 
definitions as STE files containing XML information to 
back up your settings for each site. Keep the STE files 
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Hate working in Design view? Don't worry because the code is 
only a key-press away: press Control-T (Command-T on the 
Mac) to open the Quick Tag Editor. 


on a separate volume along with the backups of the site 
folders themselves, and you can re-import the settings 
for each project if necessary. This also helps you to 
share the settings across different machines without 
re-entering the information. 


HY Quick Tag Editor 
{i If you’re working in the Design view in 
| Dreamweaver MX, you don't necessarily 


need to switch to Code view to edit tags. Open the 
pop-up Quick Tag Editor by pressing Control-T 
(Command-T on the Mac) to edit the closest tag 
surrounding the current selection on the page. Pop-up 
code hints work in the Quick Tag Editor just like in Code 
view. Press Enter when you're done, or Escape to 

cancel the changes. 


ti Wrap Tag feature 
{i If you find you need to wrap tags around a 
selection in the Layout view, such as form 


tags around a table, Dreamweaver can do this for you. 
Select the tag you wish to enclose a new tag around in 
the Tag Selector, use Control-T (Command-T on the 
Mac) to open the Quick Tag Editor, then press it again 
to switch to Wrap Tag. Pressing the shortcut a third 
time allows you to insert code at that location. Using 
the shortcut more than three times will toggle through 
the options again. 


HTML validation 

If you're writing code that needs to conform 
to particular requirements, you can use the 
HTML validation feature to check your pages against 
the W3C standards. Just choose Window>Reports> 
Validation then press the play button to generate a 
report. You can also check your pages for particular 
browsers using the Check Target Browsers command. 


t Document types 
liked Dreamweaver normally creates HTML pages 


by default, but you can also create a wide 
range of other document types, including CSS, 
ActionScript, ASR WML and so on. You can customise 
the kind of new document that DW creates by default 
in Preferences>New Document. Choose from a variety 
of document types. 


Dreamweaver summarises the attributes for common tags in 
the Tag Editor, and highlights any browser-specific features for 
you along with versions where appropriate. Control-F5 
(Command-F5 on the Mac) opens this dialog for the selected 
item in the Design view. 


i Tag Editor dialog 

If you want to see all of the available 

attributes for a tag laid out ina dialog, with 
the ability to set the values and see information about 
which browsers support each attribute, try the new 
Tag Editor dialog. Click within an element on the page, 
and choose Modify>Edit Tag to check it out. You can 
access the Tag Editor using Control-F5 (Command-F5 
onthe Mac). 


fi New mark-ups 
Dreamweaver now uses <STRONG> and 
<EM> in place of <B> and <I> tags when 
you apply the bold or italic text styles. If you wish 
Dreamweaver to use the previous, deprecated mark- 
up, you can change this setting in the General options 
in Edit>Preferences. 


i Creating and storing snippets 

Using the Snippets panel, you can create and 

store your own frequently used bits of code, 
whether they are in HTML, JavaScript or another 
language. To create a new snippet, open the Snippets 
panel and highlight the folder within Snippets where 
you wish to add your new item, highlight the code you 
wish to add, and click the New Snippet button at the 
lower right of the panel. You can edit the code in the 
resulting dialog, and specify whether it is to be inserted 
as a block orto be wrapped around a selection. 
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Adding your own code snippets is easy in Dreamweaver MX. 
Just highlight some code and click the New Snippet button in 
the Snippets panel to bring up this dialog. 


i Dynamic images 
When you're working on a data-driven site 


and you want to create a dynamic image, use 
the image placeholder first, and then apply a field from 
the Data Bindings palette. 


i Common commands 
Dreamweaver offers a selection of 
commonly used commands for use in various 
server models at the bottom of the Insert menu. Open 
the Insert menu and explore the sub-menu for the 
particular server model you're using. EEE 


The Tag Chooser is just 
one of the Dreamweaver 
features that enables 
you to write the best 
possible code. 


IE 3 HTML 4 
End Tag: Optional 


A TBODY element is an arbitrary container of one or more rows 
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Just because you're working in Code view a lot doesn't mean 


you need to type everything; Dreamweaver offers many 
ways to help you with coding your pages. You can use the 
commands in the Insert menu even while you're working in 


the code to quickly add common items such as tables and 


images. Dreamweaver MX also offers a rich Insert Tag dialog 


offering tags from HTML, CFML, ASP and so on. You can 


ee 


apply hyperlinks to selected text in Code view by choosing 
Insert>Hyperlink. Finally, there's the pop-up Code Hints 
feature, which appears when it’s needed to offer rapid 
access to tags, attributes and values. There's even a groovy 
little colour picker that you can access from directly inside 
your code when you press Control-Spacebar with the cursor 


at the end of a colour value. 
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Select Operating System 
Cobalt RaQ 


per month 


The original "Web-in-a-box" solution. 


fe) 


per month 


Red Hat Linux is the industry standard for 
web hosting. 


2 


per month 
Microsoft Windows, the choice of small and 
large businesses alike. 


Sun Solaris 


@Sun 
per month 


The market leader for reliability and performance. 


per month 


Your servers safe in our Data Centre. 


Your peace of mind. 


Select Specification 


RaQ 128 
128MB/20GB/5 GB Data Transfer 


RaQ 256 
256MB/20.4GB/20 GB Data Transfer @1S. > 


RaQ 512 

512MB/30GB/30 GB Data Transfer @la> 
RaQ 550 Gap 

256MB/40GB/15 GB Data Transfer 
512MB/2x80GB/25 GB Data Transfer 


NEW 
Celeron 1Ghz/128MB/40GB/10 GB Data Transfer 
NEW 
PIll 1.13Ghz/256MB/60GB/20 GB bata Transfer 
NEW 
PIll 1.266Ghz/512MB/80GB/30 GB Data Transfer 
NEW 
2xPIll_ 1.4Ghz/512MB/2x18GB SCSI Hard 
Disks running RAID 1/35 GB Data Transfer 
NEW 


2xAMD Athlon 2Ghz/1GB/4x36GB SCSI Hard 
Disks running RAID 5/55 GB Data Transfer 


NEW 


2xIntel® Xeon® 2Ghz/2GB/4x72GB SCSI 
Hard Disks running RAID 5/80 GB Data Transfer 


2xUltra Web Servers/Ultra || Database & 
Ultra | Mail Server/100 GB Data Transfer 


3xUltra Il Web Servers/Ultra Mail Server/ 
Enterprise Database Server/ 
250 GB Data Transfer 


4xEnterprise Web Servers/Xeon Database 
Server/Enterprise Mail Server/ 
400 GB Data Transfer 


Sun Fire V100 128 Gap 
500MHZ/128MB/40GB EIDE/ 
20 GB Data Transfer 


Sun Fire V100 128 1GBQ@ap 
500MHZ/1GB/2x40GB EIDE/ 
30 GB Data Transfer 


Your server safe and secure in our Data 
Centre. Choose from a range of data transfer 
(bandwidth) per month and benefit from 
24/7/365 unlimited technical support. 


Select Security 


per month 


Protect your machine from unwanted visitors. 
Web based control panel allows you to add 
rules and deny undesirable visitors. 


per monin 
Running databases, holding customer 
information or involved in e-commerce? If 
your answer is "yes" then order backup now 
and benefit from free restores if required! 


per month 
The ultimate tool for knowing how your 
server is operating and running. Pre-empt 
critical failure and minimise server downtime 
with messaging via e-mail or SMS. 


per month 


t 


Firewall, Daily Backup and Advanced 
Systems Monitoring bundled to save over 
£600 per year! The complete solution to your 
Web hosting security. 


Relax with... 


Unlike most of our competitors we do not 
charge for technical support or aftersales 
service. Available with every Dedicated 
Servers product, you can call or e-mail our 
support team on an unlimited basis, 24/7/365. 


Standard SLA: 

Our Industry leading SLA is your guarantee of 
a totally reliable service. We'll pay you if it's 
not! Benefit from 99.9% connectivity, 30 
minute reboot guarantee, 1:1 contention ratio 
on bandwidth and a price freeze-forever! 


Advanced SLA: 

Specially tailored for Enterprise level services 
and above, the Advanced SLA is perfect 
for mission critical sites. Backed by a 
money back guarantee, benefit from 
99.999% connectivity, two hour hardware 
resolution, 30 minute reboot guarantee, 1:1 
contention ratio on bandwidth and a price 
freeze-forever! 


Product Focus 


P wEBppliance 


QP Linux Version 
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® WEBppliance 


@windows Version 


Free Ensim software pre-installed and ready to run on every 
Linux and Windows server! 


This industry-leading, web hosting platform allows our resellers and customers to manage their 
hosting environment and administer their server with no technical ability. Ownership of the 
administrative functions and configuration of your own server will delight your customers, 
maximize performance and minimize costs. Ensim will transform your Dedicated Server into an 
easy-to-use, web hosting appliance that's ideal for web developers, designers and single site 
users alike. 


For resellers: For single site users: 
» Set-up shared hosting accounts Your own server (no sharing!) 
Control panels for your customers Easy back-up & restore 
Integrated DNS support Web-based e-mail 
e Full bandwidth management Detailed on-line help & manual 
Customisable private label control panels Real-time web-based control panels 
SSH Access 


Free with Linux & Windows Servers 


Contact Us 


We constantly monitor the competition and know we offer the best value, feature-for-feature dedicated 
hosting in Europe. We are after all, the generic name associated with scaleable, secure hosting. We 
will beat any like for like quote...try us! 
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online ( Europe 


for business 


> 
& ¢ Call us and place your order via 
y credit card or direct debit before 
bad 4:00 p.m. (Monday-Friday) and 
we'll have your server up and 
running on the same day! 


Our UK Data Centres are 
designed, owned and managed 
by us. Situated in London and 
Nottingham, they benefit from the 
latest security, backup, power 
and climate control features 
available. 


At Dedicated Servers, we are 
committed to providing you with 


the highest levels of customer 
service, covering all aspects of 
the customer _ relationship 
including: | communications, 
accuracy, performance, privacy, 
security and complaints 
procedures. 


Buy any RaQ4 (256 MB and above) and get 
a RaQ3 128 MB 


For a strictly limited period, Dedicated Servers 
will enable Advanced Systems Monitoring on 
your dedicated server absolutely free, forever! 
Available with every server over £199 per 
month! Call now and don't miss out! 


Dedicated Servers 
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The MxX version of Flash comes with some 


dazzling new features. We take you through 


_ the basics of animation and then show you how 


lashis still the defacto 
standard for producing slick 
animations online, and the 
MX version brings with it 

_ features like the free-transform tool and 
pixel-level snapping. 

Even though most of you will have 
used Flash at some point, the new MX 
version includes some natty new features 
that even the pros have found difficult to 


__ master. It's worth persevering with, 


though, as getting to grips with them will 
help you work faster and smarter. 

_lan Anderson takes you through the 
basics of manipulating artwork in Flash, 
__ alpha tweens and controlling your 


_to use the blinding new microphone tools... 


animation with ActionScript. 

Next we graduate onto creating 
motion blur effects — a technique that is 
becoming more popular with online 
designers. Motion bluris a simple 
feature for adding the appearance of 
speed to your animations. Jason Krogh 
provides the expertise here. 

But if you really want to create 
something special with your copy of Flash 
MX, our tutorial on page 48 is where you 
should be. This shows you how to make 
use of the new microphone tools to 
create a game that uses sound to control 
its characters. If you’re not impressed by 
that then you're in the wrong industry. 
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‘40 Exploring the fundamentals in Flash MX 

‘44 Create motion blur in Flash MX 

‘48 Using sound to control game characters 
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Expertise provided by lan 
Anderson of zStudio. Studio 
is anew-media consulting 
practice that provides out- 
sourced Web development 
and training to designers and 
agencies. Feedback, 
questions or business 
enquires are welcome. 

fe] ian@zstudio. co.uk 

fw] waww.zstudio.co.uk 
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Exploring the 
fundamentals 
in Flash MX 


Flash can be hard to learn, and even some experienced users still feel 
uneasy about how basic editing works. Become more comfortable with 
working in Flash in this tutorial for new and intermediate users... 


lash makes Web design 
accessible to many designers 
who don't want to get involved 

iM with HTML or dealing with 
different browsers. It offers an excellent 
design environment with all the familiar 
tools included: rulers, guides, grid and 
powerful layout capabilities. 

However, there are many differences 


between Flash and the mainstream 
design tools that most designers are 
familiar with, and these differences can 
result in frustration and delays. For this 
reason, most Flash artists shun the 
drawing tools in Flash and import nearly 
all the artwork that’s more complicated 
than text, lines or boxes from packages 
like /llustrator or Freehand. 


The first part of the tutorial gets back 
to basics, and investigates how artwork 
is managed in Flash. In the second part, 
using the example of a simple navigation 
bar, you'll learn some of the design 
techniques. Whether you're new to Flash 
or have been using it for some time, this 
tutorial will help you to feel more 
confident when you're building projects. 


Part 1: Creating basic artwork in Flash 


First, we'll focus on how artwork is created and manipulated. If you're used to vector illustration tools like 
Freehand and IIlustrator, you may find some of the Flash behaviour surprising... 


More about 
shape data 


The basic artwork in Flash is 
called shape data, and it works 
like virtual modelling clay. Once 
you put shape data inside a 
container of some sort, such as a 
group or symbol, it becomes 
much more convenient to work 
with. The shape data is always 
there, though, inside the 
container, and you can go in and 
edit it at any time. Apart from 
imported media such as images, 
sounds and video, it’s the shape 
data that will make your movie 
take longer to download. By 
storing all the shape data in 
symbols wherever possible, 
you'll keep the file size of your 
movie down. Shape data always 
sits below other objects ina 
given layer; to move shape data 
in front of text, groups or symbol 
instances, you either need to 
move it to a new layer, group it, or 
place it inside a symbol using 
Insert>Convert to Symbol. 


1 | Open Flash MX and make sure you have a 
new document open. Choose 
View>Magnification>100%. In the Properties 
palette, set the stage size to W:400, H:400 and set 
the framerate to 24fps. Save your document as 
test.fla in a location of your choice. In the Tools 
palette, locate the fill and stroke colour menus; set 
the fill to light grey and the stroke to black. 


4 | Artwork in Flash can combine automatically to 
form new shapes. This happens when two 
shape elements are overlapped and deselected. To 
prove it, make a copy of the rectangle using 
Edit>Dubplicate, then move the copy so that it partly 
overlaps the original and click away from both to 
deselect everything. The rectangles form a new 
shape. Choose Edit>Undo as often as required to 
separate them again. 


In the Tools palette, select the rectangle- 

drawing tool, then click and drag on the stage 
to draw a box. Try moving the box by dragging its 
centre; surprisingly, the outline is left behind because 
unlike in other drawing applications, the box is made 
of separate fill and stroke objects. Choose 
Edit>Undo. Click on each edge in turn — there are 
four stroke objects making the outline, and a 
separate fill object. 


Sometimes, one piece of shape artwork will 

punch a hole in an underlying one instead of 
combining with it. This happens when the fill 
colours are different. To show this, change the fill 
colour of the copy rectangle, and overlap it with the 
original as before. Click away to deselect, then 
move the copy; you'll find it has cut away an area of 
the underlying artwork. Do Edit>Undo until the two 
rectangles are whole again. 


Double-click the edge to select all the stroke 
objects that are touching, and delete them 
with the Backspace key. Using the arrow tool, drag 
the edge of the unselected artwork to reshape it 
freely. The cursor shows a curved line when 
reshaping curves. You can also point to the corner of 
the unselected artwork to drag and reposition the 
connector point between two line segments. The 
artwork must not be selected if you want to do this; 
when it's selected the cursor shows a four-headed 
arrow that will only allow you to move the artwork. 


6 | Objects combining or cutting like this can 
occasionally be useful, but more often it is an 
undesirable effect. To prevent it you can work in 
different layers or put the shape data inside group or 
symbol objects as we'll see in a moment. For now, 
choose Insert>Layer and cut and paste the copy 
rectangle to the new layer. You'll find it no longer 
joins or cuts the artwork on the first layer. 


Part 2: Working with groups 


Placing shape data inside group objects helps to make it easier to work with... 


Tweening objects 


When you're applying tweening 
to objects, it may not work as 
expected. Here are some tips: 

+ You can motion-tween groups, 
text, images, and symbol 
instances, but not shape artwork, 
+ You can shape-tween shape 
artwork only. Use Modify>Break 
Apart to render any object into its 
component shape data. 

+ Motion-tweening only works 
properly with one object on 

each keyframe. 

+ Tweening instructs Flash to 
tween the contents of two 
adjacent keyframes ina single 
layer, and is applied to the first 
keyframe of a pair. Make sure the 
contents of the two keyframes 
are of the same type. 


As in other vector illustration programs, 

grouping objects will help to keep them 
together. In Flash, grouping a single shape object 
with itself also prevents it from interacting with 
other shape artwork on the same layer. A group can 
be considered to be a container into which the 
shape data is placed. Create a copy of the rectangle 
you pasted to a new layer and choose 
Modify>Group to place it in a group object. 
Duplicate it, then try steps 4 and 5 again to prove 
that the contents of a group object are protected. 


It is possible to create nested group objects by 
grouping a group object with itself or with 
other artwork. Select the group objects you created 
in the previous step and choose Modify>Group to 
enclose both objects in another group. The shape 
data is still there; it's just inside two group containers. 


When shape data is placed inside a group 

object it can no longer be edited, although the 
group object itself may be scaled or transformed. To 
edit the contents of an object other than shape 
data, simply double-click it with the solid arrow tool. 
Double-click the outer group object, and then 
double-click one of the nested group objects. You 
can now edit the shape data; for example, to 
change its colour. Click Scene 1 in the breadcrumb 
trail under the timeline to return to the stage. > 
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Part 3: Tweened animation 


Animation in Flash is easy using the motion tweening feature... 


Types of artwork 


There are three types of artwork 
that you can create in Flash itself: 
shapes, groups and symbols. 
Shape data is the actual vector 
artwork that you create using the 
drawing tools, or import from 
other packages. Groups are 
simple containers that can be 
used to hold shape data or other 
objects. Text is effectively a 
group object, although it has its 
own characteristics. Symbols 
are containers stored in the 
Library which are used for 
content that needs to be reused 
within the movie. 
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To practise basic animation, we'll use the 

group created in the previous steps. Choose 
Modify>Transform>Scale to make the group 
smaller. Position it on the left edge of the stage. 
We'll animate it from left to right across the stage. 
Click on the grey slot at frame 30 in the same layer, 
and choose Insert>Keyframe. A new keyframe is 
created containing a copy of the group. Move this 
copy to the right of the stage. Click on the first 
keyframe in the timeline and choose Motion from 
the Tween pop-up menu in the Properties palette. 


Press Enter on the keyboard to preview the 
tween in action. Now, here's a problem. Insert 
a keyframe at frame 30 in the first layer, and apply 
motion tweening to the first keyframe of that layer. 
When you press Enter, the timeline plays the first 
tween but the artwork in the first layer won't move 
because the keyframes contain shape data, and this 
can't be motion-tweened, only shape-tweened. 


3 To fix the broken tween, select the artwork 
3 | on the first keyframe and group it using 
Modify>Group. Do the same with the artwork on 
the second keyframe in this layer. Now the tweens 
will play in both layers, because both tweens are 
acting on group objects. 


Part 4: Symbols and Alpha tweens 


Groups are rarely used, because symbols offer the same benefits and have important further capabilities 


Tweening groups or 
text using shortcuts 


If you're using the contextual 
menu or Insert>Create Motion 
‘Tween to apply motion-tweening 
and the artwork on the stage isnit 
a symbol instance, it's important 
to apply the tweening before you 
create the second keyframe. Both 
of these commands automatically 
convert the contents of the first 
keyframe to a symbol, but not the 
contents of any existing 
subsequent keyframe. This 
means that future edits to the 
symbol won't take effect in both 
keyframes, making itvery hard to 
update the movie. The best option 
is to always convert artwork to a 


symbol before you use it 


Create a new project using File>New. In the 

Properties palette, set the stage size to W:150, 
H:400, background colour: black. Set the framerate 
to 24fps. Save your document as menu.fla in a 
location of your choice. Set the fill colour to white 
and click near the top of the Stage with the text 
tool. Type the word menu and set the font, size and 
so on as you wish. 


Switch to the arrow tool, and ensure the text is 

selected. Choose Insert>Convert to Symbol. 
Choose Behaviour: Graphic, name the new symbol 
and click OK. This places the text object in a new 
symbol object in the library, and an instance of the 
new symbol is placed on the stage. In the Properties 
palette choose Colour: Alpha, then drag the slider 
down to make the text transparent. 


Click in the timeline at frame 30, and choose 

Insert>Keyframe. Click on the invisible symbol 
instance and set the Colour menu in the Properties 
palette to None. Right-click (Control-click on the 
Mac) in the timeline between the two keyframes and 
choose Create Motion Tween from the contextual 
menu. You can drag the red playback head in the 
timeline to see the effect of the alpha tween. 


Part 5: Sound and interactivity 


Enhance your projects using sounds and use scripting to control what happens in the movie 


[a] Actions for Frame 20 of Layer Name Layer 2 


sop i Stop playing te movie 
Movie Control 
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1 | Preview the animation using Control>Test 
Movie. The movie plays back in a new window 
within Flash — note how the movie loops once it has 
reached the end. Close the Preview window to 
return to the movie editing window, and Right-click 
(Control-click on the Mac) on the keyframe at frame 
30 to open the contextual menu. Choose Actions, 
then in the list to the left of the Actions panel choose 
Actions>Movie Control and double-click Stop(). 


To apply a sound that plays automatically, click 
on the first keyframe of the timeline. Choose 
Window>Common Libraries>Sounds to open the 
Sounds library supplied with Flash. Locate the sound 
called Visor Hum Loop, and drag it onto the stage 
while the timeline is at frame 1. Test the movie again 
to see the effect of the stop action and the sound. 


Flash can show you information about the final 

published movie using the Bandwidth Profiler; 
you can access this when you're in the Test Movie 
window. Choose View>Bandwidth Profiler to open 
the profiler. It shows a chart of the download size 
for each frame in the movie, and information about 
the movie down the left-hand side. You can use this 
information to help you optimise your movie so that 
it is as small as possible. 


Part 6: User-driven interactivity 


Applying actions to instances of button symbols allows the user to control their experience... 


Types of symbols 


Asymbolcan have three types of 
behaviour: graphic, button and 
movie clip. You can use the 
different types of symbol in 
different ways: 

+ Graphic symbols are used for 
individual static design elements 
such as text or logos. 

+ Button symbols can have four 
different states that are 
displayed according to mouse 
events. Up, over and down are the 
three visible states. The fourth 
state, hit, allows you to define a 
custom hit area for the button 
Actions can be triggered by 
buttons, but are always applied 
to the instance of a button rather 
than the parent symbol. 

+ Movie clips are used for 
reusable chunks of animation 
and play back independently of 
the main timeline, Movie clips 
are effectively Flash movies 
within Flash movies, and are very 
powerful objects for interactivity 


and scripting. 


Create a new layer using Insert>Layer. Using 

the text tool, type the word Macromedia onto 
the stage. Select it with the arrow tool, and choose 
Insert>Convert to Symbol. Name the new symbol 


Macromedia button, and choose Behaviour: Button, 


then click OK. Double-click the instance of the 
button to edit it. Click the second frame (named 
Over) and choose Insert>Keyframe. Change the 
colour of the text to a bright colour; this is how the 
button will appear when the mouse is over it 


‘Cut 
Copy 
Paste 


Select All 
Deselect All 


Free Transform 
Scale 

Rotate and Skew 
Distribute to Layers 


Edit 
Edit In Place 
Edit In New Window 


To define interactivity for a button, you need 

to apply the action to an instance of the 
button; you don't apply button actions in the 
symbol-editing view. Return to the stage. Right- 
click (Control-click on the Mac) on the instance of 
the Macromedia button on the stage and choose 
Actions from the contextual menu to open the 
Actions editor. 


Test the movie again using Control>Test 

Movie and move your mouse over the button 
to see it light up. You'll probably find that it's quite 
hard to activate the button because of the gaps in 
the letters. 
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User-Defined Functions 


From the Actions list on the right of the 

Actions window, open Actions>Movie Control 
and double-click the On action. You can detect 
various mouse events, shown in the options panel; 
we'll accept the default, which is to detect the 
rollover event and execute some further action as a 
result. The action to be executed needs to be 
inserted after the first line of the On action, so that 
it appears within the curly braces ({}). 
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To make it easier to activate, double-click the 

button again to enter the symbol-editing view, 
and add a keyframe to the fourth frame slot (named 
Hit). Draw a rectangle over the text to provide a 
solid hit area the same shape. Test the movie again 
to see the difference an appropriate hit state makes. 
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You need to ensure that the first line of the 
On statement is selected, and choose 
Actions>Browser/Network from the list and double- 
click the Get URL action. In the Options panel at the 
top of the Actions editor, type the address that the 
button is to link to; in this case, enter [w] 
http://www. macromedia.com and close the 
Actions editor. Test the movie using Control>Test 
Movie and try out your button if you have a live 
Internet connection 


Part 7: Publishing the movie 


Finally, we look at how to export our work as a .SWF file and deploy it within a Website, while 
supporting browsers without Flash... 


Using templates for 
compatibility 

In step 3, the HTML template 
‘Detect for Flash 3’ is chosen. As 
with most of the templates, this 
will ensure that the correct 
HTML is generated to play the 
movie in both IE and NN 
browsers. It also adds commands 
that display an alternate GIF 
image that is specified for export 
in the Formats tab for any 
browsers that don't support Flash 
or don't support JavaScript. The 
external links are reproduced by 
an image map in the HTML so 
that the non-Flash users and 
search engines can still 


navigate effectively. 


Publish Settings 


Formats | Flash | HTML] GIF | 


Type: Filename: 
VV Flash (swf) 


1 HTML (htm) 


ce You need to publish your Flash project as a 
.SWF file in order to use it on the Web. This 
can be done at any time using Control>Test Movie 
or File>Export Movie, but the best way is to use 
Publish. Choose File>Publish Settings to open the 
Publish Settings dialog. This has various tabs, 
depending on what is selected in the first tab. Flash 
and HTML are selected by default. 


Flash |HTML| GIF | 


Version: [Flash Player 3 a 
Flash Player 1 
Load Order: [Flash Player 


Flash Player 2 
Flash Player 4 


Flash Player 5 
Flash Player 6 


2 | We're going to set some typical options. In 
Formats, ensure that Flash and HTML are 
selected, then turn on GIF as well to export the first 
frame of the movie as an image. In the Flash tab, 
choose Version: Flash Player 3. This is the most 
widely compatible version to export your movie in, 
while still allowing the essential functionality to be 
supported. Around 97 per cent of the Web audience 
can view Flash 3.0 movies, while Flash 6.0 movies 
have a much smaller audience share. 


Options: 


Flash HTML | GIF | 


Template: [Detect for Flash 3 +] 


Dimensions: D 


etect for Flash 4 

Detect for Flash 5 

Detect for Flash 6 

Flash Only 

Flash Only For Pocket PL 


In HTML, choose Template: Detect for Flash 3 

Click the Publish button, and Flash will output 
the selected formats as files in the same directory as 
the .FLA project file. You can then open the HTML 
file in your Web editing software and copy and 
paste the code into your final page. Make sure all 
the files that were exported are saved in the same 
folder. You can substitute the GIF file that Flash 
generated with another image having the same 
dimensions if necessary. EEE 
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Create motion 
blur in Flash 


There is more to motion than framerate, as 
our tutorial will demonstrate... 


nce you have mastered the 
- process of creating simple 
motion tweens, there are a 
few good tricks that can help 
you create professional-looking motion. 
One very simple animation technique is 
the use of motion blurs. Fast moving 
objects appear to be blurred because of 
our persistence of vision. This effect is 
captured when shooting live-action 
using film, but it has to be simulated 
when creating animation. 

We are limited in what we can do with 
motion blurs because they require the 


use of bitmap images, and Flashisa 
vector-based format. Each bitmap we 
use adds to the overall file size. 
However, it’s impressive what we can 
accomplish with just the use of one or 
two bitmap images. 

We are going to modify an existing 
animation to use the blur motion effect. 
We will take artwork from Flash, into 
Photoshop for processing, and then back 
into Flash. At the same time we will 
introduce a couple of other simple 
techniques to create professional- 
looking motion within Flash. 
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Part 1: Blurring foreground elements 


Making good animation better with blur effects, easing and follow-through... 


Motion tween 


The original animation is created 
with simple motion tweens. Flash 
has the ability to automatically 
position an object at various 
points as it moves from one 
position to another on the screen. 
The tween can also create a 
smooth transition in 
transformations applied to the 
artwork such as scaling, rotation 


or transparency. 
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1 | Open the motionBlur.fla file provided on the 
cover CD. Examine the timeline and then 
select Test Movie from the Control menu to watch 
the original animation. 


Edit View Insert Modify Text Control Window Help 


Open the library by selecting Library from the 
Window menu. Double-click on the eyeball‘ 


symbol to edit it. 
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4 | In the Export Image window enter the file 
named eyeball1.png and choose the PNG 
format. This is a great file format for working with 
bitmaps within Flash because it is lossless and 
supports transparency. 


FE Save As Template... 
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Import... 
Import to Library... 
Export Movie... 


Publish Settings.. 
Publish Preview 
Publish 
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8] First you need to create a bitmap file of your 
artwork. To do this, select Export Image from 
the File menu. 


rescluion: [72] opt Cae Sereen> 
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Ga In the Export PNG window select Minimum 
Image Area, 24 bit with alpha channel, and 


None for Filter. Select the Smooth checkbox and 
leave the others unselected. 


Distance: {15 pixels 


Ls 0 for the angle and 15 for distance. 


Select Motion Blur from the Filter menu. Enter 


Canvas Size 


— Current Size 40K 
Wide: 118 pixels 
Height: 116 pixels 


| Height: [116 
Relative 
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G Open the newly created PNG file in 
Photoshop. Select Canvas Size from the Image 
menu. Set the width to 200 pixels and click OK. 


To create a new PNG file select Save for Web 
from the File menu. Under Settings select PNG 
and transparency. Save the file as eyeball1_blur.png. 


& Picture 2 
& Plaure 3 
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Move back to the motionBlur-fla file and select 
Import from the File menu. Select the 
eyeball1_blur.png file. > 
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Blurring foreground elements continued... 


Swap button 


The Swap button provides a 
handy way to switch to a new 
symbol while retaining the 
instance's position and any 
transformations that have 


been applied. 


Easing in and out 


In real life, motion is based on 
acceleration (the gas pedal) and 
deceleration (the brakes). By 
default, Flash creates tweens 
which reflect a perfectly even 
speed. In Flash, the term Ease In 
means to start slowly and speed 
up. Ease Out means to start 
quickly and slow down. Note 
that, strictly speaking, the 
terms are used differently in 


traditional animation. 


Anticipation and 
follow-through 


When animators studied the way 
people move they noticed that 
most movements are preceded 
by a slight motion in the opposite 
direction. This effect is commonly 
exaggerated in animation and is 
called anticipation. A similar 
effect is used when motions 
come to a sudden halt. The 
moving object is carried a little 
too farand then snaps back to a 


final resting position 
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10 | Select the newly imported image and then 
select Convert to Symbol from the Insert 
menu. Enter eyeball1_blur and select Movie Clip in 
the Convert to Symbol window. Now delete the 
newly create symbol instance on the stage. 


Repeat steps 2-11 for the eyeball2 symbol — 

export a PNG file and open this in Photoshop. 
Use an angle of 15 when using the motion blur 
filter. Import this PNG back into Flash and create a 
symbol containing the blurred bitmap. Then swap 
the symbol instances found on frames 62, 71, 113, 
and 120. 
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11 | Move up to the main timeline by clicking on 
Scene 1 just below the timeline. Move to 
frame 13, where the first tween begins. Select the 
symbol instance on the stage, press the Swap 
button in the Property Inspector and select the 
eyeball1_blur symbol. 


Window Help 


Play 
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Go To End 
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Step Backward 


4 Debug Movie 
Test Scene 


¥ Loop Playback 
Play All Scenes 


Enable Simple Frame Action: 
: Enable Simple Buttons 
EE waite Sounds 
vv Enable Live Preview 


ee rT 


Match Size Space 


14 You have now added the motion blur effect to 
both animation sequences. Use Test Movie 
under the Control menu to see the results. 
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Move back to frame 12, select the object in the 

eyeball layer and nudge it to the right 10 pixels 
(Shift+right arrow). Now the object takes a step 
back as it takes off. This effect is called anticipation. 
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Move to frame 71, select the object in the 

eyeball layer and nudge it up 10 pixels and to 
the right 20 pixels. This creates a follow-through 
effect. Now move to frame 113 and move the 
object down 10 pixels and to the left 20 pixels. 
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12 | Move to the next keyframes in this layer and 
use the same step to swap each of the 
instances. Do this for the keyframes on frames 23, 
32, 40, 46 and 52. 
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15 | Now we are ready to add some finishing 
touches. Select the keyframe on frame 13. In 
the Property Inspector enter an easing value of -50. 
This will make the object accelerate as it moves. Add 
the same easing value of -50 to frames 62 and 113. 
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Finally, test your movie. You can continue to 
adjust the speed, pacing and easing until you 
are happy with the results. 


Part 2: Creating a continuous scrolling background 


Charge things up with a blurred background that just keeps going... 
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Scroll the timeline to the area labelled motion 

sequence 3 (frame 130). We are going to use 
another approach to create the illusion of motion - a 
continuous scrolling background 
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Move back to the motionBlur.fla file and go to 

the main timeline on frame 130. Select and 
delete the stars on the stage. Then import the newly 
created stars_blur.png file 
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Open this PNG file in Photoshop, select Canvas 
Size under Image and set the width to 300 
pixels. Now apply a motion blur using 0 for the 


Select the stars movieclip in your library and angle and 15 for the distance. Use Save for Web to 
use Export Image to create a PNG file of the save the blurred image as a bitmap called 
stars called stars.png. stars_blur.png. 


Edit View Insert Modify Text Control _Window Help 


6 | Double-click on the starfield symbol in the 
library to navigate inside the symbol. Now 
select the bitmap image and select Duplicate under 


Select the newly imported bitmap and use the Edit menu. Move this new copy to the left so 
Convert to Symbol under the Insert menu that its right edge touches the left edge of the 
Give the new movieclip the name starfield. original bitmap. Align the two bitmaps vertically. 
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Move back to the main timeline by clicking 

scene’. Select the starfield on the stage and 
use Convert to Symbol under the Insert menu. 
Name this new Movie Clip symbol starfield_pan 
and click OK. 


8 | Double-click on the new starfield_pan symbo 
in the library. Once inside, select frame 8 in 
Layer 1 of the timeline and then select KeyFrame 


under the Insert menu. Select the starfield in frame Select the first keyframe in the timeline and set 
8, open the Info window (Command+! or Ctrl+!) the Tween to Motion in the Property Inspector. 
and enter an X value of -30. Now use Test Movie to see the finished results, FEES 
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Using sound to 
control moves in Flash 


Flash MX's microphone tools open up a new 
world of interactivity. Forget the mouse and 
keyboard. Now you can play with a shout... 


f you have a bent for testing 
new types of interactivity 

and stretching the edges of 
i the Internet envelope, 
you'll love Flash MX’s deliciously 
innovative microphone tools (see Media 
mogul: Flash Communication Server 
MxX, page 54). 

In this tutorial, Stockholm’s Perfect 
Fools shows how it used the new features 
to craft a simple platform game witha 
twist. In CrashBaby you help your‘baby’ 
navigate a bizarre hallway obstacle 


course by, well, doing a little whoopin’ 
and hollerin’. 

The tutorial details how to build the 
game from the ground up in classic Pong 
style. You'll learn how to make a fully 
functional platform game engine in 
Flash, as well as how to access MX’s 
microphone features to add a new level 
of interactivity to your repertoire. 

You should have at least basic 
proficiency with Flash MX. Before 
starting, install the freeware typeface 
Pixel included on the cover CD. 


Part 1: Structuring the movie 


A few quick steps get your game off to a good start... 


All-in-one clip 


Perfect Fools structures its Flash 
movies with everything in one 
master movieclip at frame 1 on 
the main timeline. Why? Because 
of Flash’s infamous ‘Failed to 
save’ bug. Occasionally when 
working intensively with a fla, a 
request to save is met with the 
cheeky response: “Failed to save 
document.” With everything in 
one clip it’s easy to copy over to 


a new file. 


Throughout this tutorial we refer to files found 
in the Tutorial\Flashmic folder on the cover 
CD. A copy of the finished game, complete with lots 
of helpful ActionScript comments, is included on the 
CD in the Tutorial\Flashmic folder (filename 
cb_final.fla). When you've finished, your game 
should look like the above image. 
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4 | Double-click on gameMC to edit it in place (a 
small circle will indicate the movieclip's 
position in the middle of the stage). Once inside add 
49 blank frames and four new layers. Rename the 
layers, from top to bottom: functions, actions, 
foreground, baby, background. 


Begin by opening cb_start.fla from the cover 

CD. This file contains most of the graphics 
you'll need to build your game. Under 
Modify>Document, set Background Colour to black 
and Frame Rate to 40 frames per second. 


NSDNOe\-B 
S93 460> 9% 


Baad 


. cceeeceeeeree 


Add keyframes to your layers as follows: 
functions and actions layers, frames 10, 20, 30 
and 40; foreground, 20, 30 and 40; baby, 30 and 
40; background, 40. On the functions layer you 
need to label your five keyframes in order from left 
to right: setup, gameStart, gamePlay, gameOver, 
and clearing. 


Create a new symbol with Insert>New Symbol. 
Name the symbol gameMC and choose Movie 
Clip Behaviour. Return to the Scene 1 timeline, open 
the Library, and drag gameMC into frame 1. Using 
the Properties Inspector, set gameMC's position to 
X:275, Y:200. 


6 | Now it's time to add some ActionScript. Select 
frame 1 of the functions layer, open the 
Actions panel, and paste in the script found in the 
file 6a.txt in the Tutorial\Flashmic folder on the 
cover CD. On the actions layer add the script from 
6b.txt to frame 20, and 6c.txt to frame 30. 


Part 2: Building the platform game 


With the background player you can create hallway segments, which are pulled randomly during the game. 


Mike issues? 
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While Flash’s microphone 


functions are groundbreaking, 


they may have one or two quirks. 


When the movieclip containing 


the microphone stream leaves 
the timeline, objects from the 
previous keyframe sometimes 


(mysteriously) appear in the new 


keyframe. That's the purpose of 
gameMC frame 40: to ‘clear’ the 
screen before restarting the 
game. Another issue is when you 
change Record Volume in the 
microphone settings panel, the 
new level seems to last only 


temporarily. this .onfnterframe = 


function() 


Your game's structure is now largely complete. 

Frame 1 initialises variables and contains game 
functions. 10 is where the movie holds while waiting 
for new games to start. 20 manages play, while 30 
handles the game ending (see the margin note 
‘Mike issues?’ to learn what frame 40 is for) 
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Next we need to construct the movieclip that 

animates the randomly changing background 
through which our baby moves. At background 
layer frame 40, draw a black rectangle with no 
outline. Set the rectangle's size and position using 
the Properties Inspector: W:550.0, H:400.0, X:- 
275.0, Y:-200.0. Copy the rectangle. 


3 Paste the rectangle into frame 1. Choose 
Insert>Convert to Symbol. Name the symbol 

backgroundMC, Behaviour Movie Clip. Position 
backgroundMC at X:-275, Y:-200. Select 
backgroundMC and Insert>Convert to Symbol 
once again. Name the new symbol bgPlayerMC. 
In the Properties Inspector, give it the instance 
name bgPlayer. > 
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Part 2: Building the platform game continued... 


Platform engine 


CrashBaby’s platform engine is 
simple but flexible. Customise 
your own graphics to create an 
entirely different look. Add a 
layer to backgroundMC and 
place more advanced obstacle 
graphics over the existing 
barebones surfaces. The game 
shown here was built with the 


same engine. 


No microphone? 


If you've got a pair of 
headphones, you can plug them 
into your mic adaptor and use 


them as a simple sound input 
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Double-click on bgPlayerMC to edit it in place. 

Repeat with backgroundMC. Insert five 
frames and three layers. Name the layers, from top 
to bottom: actions, fore, floor, and back. On both 
the actions and fore layers, add keyframes to frames 
2-6. Frames 5 and 6 should be named startScreen 
and endScreen respectively. 
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Next we want to add the surfaces over/around 

which the baby manoeuvres. Most of these 
are already in the library, but to show how these 
were made we'll create one from scratch now. Begin 
by dragging whiteBlockMC from the library to 
frame 1 of the layer fore 
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Arrange the four surfaces as a box, with 

corners almost touching. Position this group 
anywhere above the floor. Finally, add to the fore 
layer the object that tells your baby when to ‘fall’ off 
the obstacle. Position boxReleaseMC 30 pixels to 
the right of, and 35 pixels above, boxBackMC 
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backgroundMC contains the game's various 
screens. startScreen and endScreen are for 
game start and ending. Frames 1-4 hold play 
segments, pulled randomly during the game. Go to 
actions layer frame 1, open the Actions panel, and 
type the action stop();. Copy this action to each of 
the other five frames. 
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Now let's give our baby a floor to crawl on. 

First, since we'll be doing lots of work above it, 
lock the layer named back. Open the Library and 
drag floorMC onto frame 1 of the floor layer. Set 
floorMC's position to X:-250, Y:120. 


8 | Selecting whiteBlockMC, Insert>Convert to 
Symbol. Name the symbol boxShelfMC. 
Double-click on boxShelfMC. Select whiteBlockMC 
and open the Actions panel. Paste in the 
ActionScript from file 14.txt. This controls how the 
surface interacts with the baby. Return to 
backgroundMC's timeline. Resize boxShelfMC to 45 
pixels wide by 5 high 


Along with a top (boxShelfMC) your obstacles 

need a front, back and — if they're not sitting 
on the floor — bottom. Drag boxFrontMC and 
boxBackMC onto the fore layer and size them to 5 
pixels wide by 30 high. Add boxUnderMC, resized 
to 45 pixels wide by 5 high 


11 | Copy this group and paste it as many times as 
you like throughout frames 1-4. Resize the 
surfaces to create a variety of obstacle environments 
(see cb_final.fla for examples). When you're done, 
give all of the surfaces unique instance names: 
front1_2 (for example, frame 1 instance 2), 
shelf3_2, under2_2, back4_3, etc. 


Now that your obstacle course is ready, let's 
add some bonuses and nasties. Drag bonusMC 

and skullMC onto the fore layer. As with the 

surfaces, you can copy these as many times as 

you like throughout frames 1-4. Just remember to 

give each instance a unique name: bonus4_3, 

skull2_1, etc. 


GAME OVER 


GAME OVER 
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Go to frame 6 (endScreen), fore layer. Create a 
text field with: Text type Static Text, Font Pixel, 
Font Size 40, colour white, style Bold, alignment 
Centre. Write GAME OVER into this field. Copy the 
field. On the copy, reset type to Dynamic Text and 
link to the variable _parent._parent.finalScore. 


You can always add more game segments by 

inserting more frames to backgroundMC. Just 
be sure that startScreen and endScreen stay at the 
end. Now return to the bgPlayerMC timeline. Select 
backgroundMC and give it the instance name 
backGr2. Copy and paste this movie clip. 


15 | Position the new copy at X:-825, Y:-200. Give 
the copy an instance name of backGr1. Exit to 
the gameMC timeline. To complete the game 
elements drag babyMC from the library to frame 1 
of the layer baby. Position babyMC at X:-12.5, 
Y:85.0 and give it the instance name baby. 


Part 3: Adding microphone interactivity 


With Flash MX, adding audio interactivity to your productions is as easy as typing Microphone. get()... 


Player Settings 
Window 


Whenever you use Flash MX's 
new features to access local 
resources like the microphone, 
adialog called the Player 
Settings Window pops up to ask 
the user for authorisation, This 
dialog is a movieclip that's built 
into the player, and as far as 
we've been able to tell there's no 
way to disable it. To access 
resource settings while the 
movie is playing, right-click and 


choose Settings. 


Perfect Fools 


This tutorial was developed by 
Perfect Fools, the interactive 
production company based in 
Stockholm, Sweden. From an 
island stronghold in the heart of 
Stockholm harbour, it continues 
to hatch its megalomaniacal plot 
to conquer the world, one brand 
ata time. Visit Perfect Fools at 


[w] www.perfectfools.com. 
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Enable the game elements with ActionScript. 

Go to frame 1, functions layer, open the 
Actions panel, and copy the contents of file 22a.txt 
from the CD into the gap following the variable list 
Jump to frame 20, actions layer, and add the script 
from 22b.txt to the space after this.onEnterFrame = 
function() {. 


Time for the bits of ActionScript that exploit 
4 | Flash MX's microphone object. Open the 
Actions panel, select actions layer frame 10, and 
paste in the contents of file 25a.txt from the 
Tutorial\Flashmic folder on the CD. Go to 
actions layer frame 20 and, in the gap after 
this.onEnterFrame = function() {, paste the script 
from 25b.txt. 


2 | And now the fun part: connecting the 
microphone input to the game. First, we need 
a meter to display the microphone’ activity level. 
From the Library, drag meterMC to the lower-left 
corner of the stage at frame 1, foreground layer. 
Double-click on it to edit it in place. 
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To ready meterMC for use as a readout, insert 
one layer and name it meterBar. Drag 
meterBarMC from the Library onto this layer. 
Position meterBarMC at X:4, Y:5, and give it an 
instance name of meterBar. Exit to the gameMC 
timeline, select meterMC, and set its instance name 
to meter. 
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5 | Finally, place two text fields on frame 1 of the 
foreground layer. In the Properties Inspector 
choose: Text type Dynamic Text, Font Pixel, Font 
Size 20 points, colour white, style Bold, alignment 
Right, Selectable off. Link the fields to variables 
bonusPts and elapsedTotalSecs respectively. 


6 | Copy the fields together with meterMC and 
paste them in place on frame 20. Back at frame 
1 create another text field. Set Text type to Static 
Text, Font to Pixel, Font Size to 40 points, style to 
Bold, and alignment to Centre. Type YELL TO PLAY 
into the field. FEES 
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Media mogul: Flash 


Communication Server MX 


Macromedia delivers on Flash MX's revolutionary promise 
with an incredible new server technology... 


efore Macromedia launched Flash MX this 
( spring there was a discreet yet distinct buzz 
from beta-testers about a raft of new 
j media-rich functions that would 
revolutionise the Internet. 

When MX finally arrived some of us felt a small 
cloud of disappointment darkening the blue sky of our 
happiness: many of the media tools about which we'd 
heard such tantalising rumours were missing. 

While Flash MX certainly included Lots of exciting 
new features and was a major upgrade, it just didn't 
seem to fulfil the ‘revolutionary’ promise. But aside 
from one or two mysterious references to an upcoming 


product codenamed Tin Can, Macromedia remained 
mute on the subject. 


‘Secret’ features 


Which left matters to those of us who were interested 
enough to dig on our own. And dig we did. At Flash 
Forward (a show in San Francisco earlier this year) one 
speaker described how a long list of undocumented 
objects could be gleaned from Flash Player 6 by 
opening it in Microsoft Word. 

Other investigators cooked up ActionScripts that 


forced MX to divulge its secrets (see A global hunt on > 


Illustration: Identikal [w] www.identikal.com 
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Macromedia Flash Player Settings 
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Even before FlashCom arrived developers were testing the 
exciting ‘hidden’ objects they discovered in Flash MX. This 
game uses the microphone. See the tutorial on page 48. 


page 57). Enticingly, entirely new tools like Camera, 
Microphone and NetConnection began to surface on 
Flashkit, Ultrashock and the other Flash boards. It 
turned out that these features were still in Flash Player 
— they just weren't advertised in the documentation. 

Before long, examples were posted that made use 
of Web cameras and microphones on the user's 
computer. It was even possible to enable Flash movies 
on the local computer to share information with each 
other like never before. 

But could you do anything with NetConnection? 
Could you save the audio or video streams? Or allow 
another user across the Internet to access them? While 
nobody knew for sure, the answer to all of these 
questions seemed to be no, at least for the moment. 

This month, with the production release of Tin Can 
— now dubbed Flash Communication Server MX or 
FlashCom for short — Macromedia put a resounding 
end to the guesswork. And with the incredible new 


FlashCom architecture 


With FlashCom and Flash MX it’s easy to create high-level rich- 
media applications like this video conferencing system. This 
fully-functional example comes with the FlashCom installation. 


features made possible by FlashCom, it may actually 
be bigger news than Flash MX. 


So what is FlashCom? 


Flash Communication Server MX enables sharing of 
streaming video, audio, data and other media elements 
between users over the Internet. All you need isa 
browser with Flash Player 6 or higher to enjoy 
industrial-strength Webchats, multiuser games, video 
conferencing applications and more. In many ways 
FlashCom does for Flash what Shockwave Multiuser 
Server does for Shockwave, but with the addition of 
tich-media streaming. 

Video and audio streams can either be captured in 
real time via the user's digital camera and microphone 
or recorded and left on the server for later playback, in 
the new ‘flv file format. FlashCom easily scales the same 
media streams to different users’ bandwidth limitations. 


The ease with which it’s possible to get FlashCom up and running belies a robust 


and highly scalable architecture... 
A basic FlashCom application includes a client, created in 
Flash MX and running in Flash Player, communicating with 


custom-made server-side applications through 


Simple FlashCom architecture. In addition, the FlashCom 
server can be extended with connections to a number of 
different application servers using a variety of protocols. 


Macromedia's Real-Time Messaging Protocol (RTMP). 
Server-side applications are ActionScripts that are stored 
in the FlashCom server's applications folder. 

FlashCom co-ordinates interaction between the user 
and the application in use, as well as between users. A 
Flash-based Administration Console enables real-time 
monitoring of server activity. 

Beyond this simple structure FlashCom is extensible in 
a number of powerful ways. FlashCom can open its own 
real-time NetConnections with other FlashCom servers; for 
example, to create a load-balancing arrangement between 
high-use servers. Itcan also use Macromedia Flash 
Remoting, via the Action Message Format (AMF) over HTTR 


to communicate with other application server types 


including Macromedia ColdFusion MX, Macromedia 
JRun, Microsoft .NET and J2EE servers. Finally, FlashCom 
can also connect with other application servers over 
standard HTTR 


The FlashCom package comprises a server software 
suite as well as additions to Flash MX — many of 
which, as mentioned above, have actually been in 
there all along. A FlashCom application consists of a 
‘client’ .swf movie, authored in Flash MX, which uses 
those once ‘secret’ objects to communicate with a 
server-side application, hosted on the FlashCom 
server. Server-side applications are pure 
ActionScript, and they control communications 
between FlashCom and the user or users. 

Installing the server is absurdly simple, and that’s 
speaking as a non-techie. It took us about 15 minutes 
to get it operational, and another ten to give the sample 
video conferencing application a thorough spin. 
FlashCom comes complete with an uncomplicated 
administrative interface and help files that explain 
everything you need to know to get applications 
working, both on the server and for the client. 


FlashCom’s place in the MX family 


With the release of the MX generation Macromedia 
has made a concerted effort to give some sense of 
order to its burgeoning product line. But between 
ColdFusion MX and JRun 4, not to mention all of the 
development environments like Flash MX, 
Dreamweaver MX and Fireworks MX, it can still get 
a bit confusing. 

So at first blush it’s easy to wonder if FlashCom is 
really necessary, especially given the recent 
ColdFusion upgrade. The answer: absolutely. FlashCom 
adds a whole new range of possibilities to the Flash 
development universe. It augments ColdFusion's 
ability to deliver dynamic data to the Flash Player with 
streaming rich-media and the sharing of Flash objects 
between users. 

FlashCom is also designed to integrate smoothly 
with ColdFusion MX as wellas other non-Macromedia 
products like Microsoft's .Net. It acts as the hub that 
co-ordinates communication between users and all 
other application servers or databases. 


Power to the people 


Starting to sound a little too technical? While 
FlashCom is a powerful package and certainly has the 
potential to get esoteric at the higher end of 
development, Macromedia has worked hard to keep it 
accessible to a broader audience. Its goal is clearly to 
make FlashCom attractive to the same non-technical 


The FlashCom server suite includes a simple management tool 
through which you control all server activity via (what else?) a 
Flash interface. 
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NetConnection (object) 


MovieClip (abject) eaten rane 
chaudio 


‘+ The NetConnection abject manages a bidirectional connection between the Flash 
Player and a server, which lets you 
Communication Server 


NotCennection connect 
NetConnection onStatus 
NetStream (object) © Nattemar.abiaet)—for any RTMP communication 
Constructor for the NetStrean © Camera Lobiset)—tor capturing and transmitting video 
Pv Steger * (Hiceanhane (obisct)~for capturing and transmitting audio 
NetStream.attachVideo © Shacndohjaet (abivet)—tor sharing data 
NetStream.bufferLength . 
NetStream bufferTime 
NetStream.close 


}-for displaying video 


For information on creating « NetConnection object, see Constructar for the 
4 MetConnection abiect. 


Detailed documentation reveals the ‘secret’ functions in their 
full glory. In many cases these objects are even more interesting 
than we might have hoped. 


developers who have been drawn into doing a bit of 
ActionScripting by its ease and simplicity. 

The FlashCom download includes detailed help 
files that give a good grounding in all of the new 
features. In addition, the installation upgrades Flash 
MX by adding a folder called Communications to the 
Actions Toolbox and updating code-hinting with new 
hints about the extra objects. Unfortunately, one thing 
the installation doesn't do is to expand Flash MX’s html. 
help files (Using Flash and the ActionScript 
Dictionary) with the relevant new documentation. 
When developing FlashCom client movies in Flash MX 
you'll have to refer to FlashCom’s help files for 
guidance on how to set up your -fla. 

But Macromedia has made it even easier. With a 
new set of Communications Components available ina 
separate, free download, they've provided the tools 
you need to get high-level communications 
applications up and running in no time. 

By using pre-formatted components such as Chat, 
SimpleConnect, SetBandwidth and AVPresence you 
can build complex applications like video conferencing 
centres with very few extra lines of ActionScript. Or if 
you are positively allergic to scripting, you could goa 
long way simply by taking one of the many fully- 
functional examples included with the FlashCom 
installation and modifying the graphics to your needs. 


The new features 
Whether or not you're an avid ActionScripter, you 
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Updates to Flash MX help you get started with FlashCom. A 
Communications folder is added to the Actions Toolbox along 
with new code hints. 


Macromedia offers a new set of Communications Components 
in a separate, free download. With these components, 
developing FlashCom apps is that much easier. 


should check out the objects that come with FlashCom 
to get a feel for the new possibilities. On the Flash MX 
side, they include: 


NetConnection 

Controls all aspects of the connection between the 
Flash Playerand FlashCom. NetConnection employs 
Macromedia’s proprietary Real-Time Messaging 
Protocol (RTMP) to provide an efficient, two-way link 
for streaming video, audio and other data. 


NetStream 

This enables you to open one or more one-way 
channel within a NetConnection, to or from the server. 
Each NetStream contains either video, audio or text 
data. A typical FlashCom experience might involve 
multiple NetStreams for each user. Using NetStream, 
you can choose to record stream data on the server in 
the flv file format. With the NetStream.play method it’s 
also possible to display a still image from the 
beginning of a video stream before the user commits 
to streaming the full video. 


Video 

How can Flash Player show video that's not part of the 
-swf at the time it’s created? Thanks to the Video 
object, a generic container for video streams can be 
placed on the Stage while building your fla. The Video 
object can display a live stream from the user's digital 
camera ora live or recorded stream from the 
FlashCom server. FlashCom is not required when using 
Video objects together with a local camera. 


Camera 

Provides all the necessary features to capture, 

adjust and interact with live video through a camera 
attached to the user’s computer. Camera methods 
such as setMode, setQuality and setKeyFramelnterval 
make it easy to optimise the video stream for the 
constraints of the user’s uplink to the FlashCom server. 
As with Video, the Camera object can also be used 
locally without the presence of FlashCom. The 
Camera.activityLevel property, which quantifies 

the amount of motion detected by the camera, 
enables interesting interactions based on the 
contents of the video stream. For example, you 

could use this feature to create a home security 
system with a camera that begins recording as soon 
as it detects movement. 


A global hunt 


In the weeks before Flash MX 
launched, there was word from the 
beta community about great new 
media features. When MX arrived 
without the goods, some folks 
started digging... 


And it wasn't long before they were turning up 
interesting results. Thanks to Peter Hall and other 
Flash gurus, ActionScripts exposing Flash MX’s 
hidden objects, as well as sorted lists generated 
by the scripts, began circulating on many of the 
Flash boards. 

Groups of people with a special interest in these 
types of tools started trading the shreds of experience 
they gathered on their forays into the undocumented. 

At FlashKit, Steve Ogden (agent vivid) posted 


another handy script that traced object properties: 


ASSetPropFlags(_global,null,8,1); 
//theTrace = _ global; 

theTrace = Microphone.get(); 

for (x in the Trace) {trace(x);} 


While many succeeded in making simple applications 
using local features of the new objects, such as sound 
meters and displays with a local microphone or Web 
camera, the question that seemed to come up again 
and again was “Can you save these streams?” 

Today all the questions are answered with “Get 


Flash Communication Server MX.” 


This ActionScript was posted on Flashcoders Wiki by 
Peter Hall. When pasted into Flash and tested, it 
outputs a complete list of Flash objects. 


Microphone 

Similar to Camera but for capturing audio input through 
a microphone. As with Camera, the Microphone object 
has an activityLevel property that facilitates 
rudimentary interactivity based on the volume of the 
audio stream. Also like Video and Camera, Microphone 
can be used locally, independent of FlashCom. For an 
example of an entirely local interaction.using the 
Microphone object, read Using sound to control moves 
in Flash on page 48. » 
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Mediatemple used Macromedia’s Communications 
Components to whip up this chat demo showing off its new 
FlashCom hosting services. 


SharedObject 

While it might not be as glamorous as the Video, 
Camera and Microphone objects, SharedObject may 
prove to be at least as valuable in the long run. This 
object makes it possible to save persistent application 
data on the local machine and quickly share 
information between users via the FlashCom server. 


Local Connection 

Enables two or more local Flash movies to 
communicate without relying on FSCommand or 
JavaScript, orthe FlashCom server for that matter. 

On the server-side server, applications written in 
ActionScript control how FlashCom interacts with 
corresponding Flash Player clients. The application's 
scripts are stored as .asc files in FlashCom’s 
applications folder and only activated when the server 
receives an initial request from the application client. 
These ActionScripts rely on a new set of objects 
created specially for FlashCom: 


Application 

Co-ordinates and stores information relevant to 
FlashCom’s handling of each application instance. 
Stored information persists only until the application 
is unloaded from memory (as a default, applications 
are dumped a maximum of 20 minutes after the last 
request to use the application). The Application 
object manages client connection attempts and 


With SharedObject you can store application information on 
the user’s computer. The Local Storage dialog allows the user to 
limit the amount of disk space used. 
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Embedded Video objects enable real-time streaming video without the video first being exported with your .swf. 


enables you to specify functions to be run at 
application startup or shutdown. 


Client 

Controls the server end of a NetConnection opened by 
the Flash Player client. The Client object receives 
commands from the client and can call methods of the 
client’s NetConnection object. In addition, Client can 
obtain key information about the user’s platform. 


NetConnection 


This object adds substantially to FlashCom’s 
robustness by enabling the FlashCom server to open 
NetConnections with other application servers or 
other copies of FlashCom. 


SharedObject 


Facilitates interaction with a client’s shared objects or 


While not as sensational as Camera and Microphone, 
SharedObjects may prove equally useful. In this example, the 
ball’s movement is synchronised between two Flash clients. 


between the client and a shared object stored on the 
server. ‘Remote shared objects’ can be saved on the 
server indefinitely, allowing users to view and modify 
the information they contain, with the changes 
immediately available to other concurrent users and 
later users. For example, one remote shared object 
maintained on the server might contain a high-score 
list fora multiuser game. As each player's score is 
recorded, the updated version of the list becomes 
available to all other list viewers. 


Stream 


Just as the Client object conducts the server's handling 
of client-initiated NetConnections, the Stream object 
is used to guide each stream between server and client. 
Stream objects are created automatically upona 
NetStream request from a client, or launched when 
needed by a server-side application. 


Testing tools 


Two more handy additions to Flash MX aid the 
process of debugging and testing communication 
applications as you build them. First is the 
NetConnection Debugger (ND), which you enable 
within an application through the ActionScript call 
#include “NetDebug.as’. By inserting this line into 
your movie you allow the ND to track your 
application's attempts to contact FlashCom. The ND 
gives detailed feedback on each step of the 
NetConnection process. Through the ND’s Filters 
panel you can also choose to view limited subsets of 
the events that occur during a connection. 

Asecond tool, the Communication App Inspector 
(CAI), monitors what is happening on the server once 
an application is running. The CAI provides exhaustive 


Flash MX’s new NetConnection debugger simplifies what might 
otherwise be a sticky issue: tracking and troubleshooting the 
client-server connection. 


real-time diagnostics about every aspect of the client- 
server interaction. Included are a list of log messages 
generated by the server-side application, details 
about the shared objects and streams in use, and 
general application status. 

Both the ND and the CAI can be found under Flash 
MX’s Window menu. 


There's just one catch 


As you've probably gathered by now, we're pretty 
excited about the great possibilities that come with the 
arrival of FlashCom. Unfortunately, our joy is not 
entirely unalloyed. If there is one asterisk we have to 
add to our adoration, it’s regarding the price. In short, 
FlashCom is anything but cheap. 

While a developer copy runs at £359 (US$499) it 
comes with a meagre ten simultaneous connections or 
one megabit of peak bandwidth. Hardly enough to do 
proper application testing. The next step up is straight 
to the Professional Edition, with 500 simultaneous 
users/10 megabits of total throughput, for £3239 
(US$4500). Need more connections? No problem. You 
can buy extension packs in increments of 500 
users/10 megabits for £2879 (US$4000) each. 


Capturing camera input 


More info about FlashCom 


A full, 30-day trial version of Flash Communication Server MX Professional Edition is available for download from 


[w] www.macromedia.com (yes, that's with the 500 simultaneous connections/10 megabits maximum bandwidth, just to 


give you a sweet taste of the big-time). More developer resources are available here: 


http://www.macromedia.com/go/flashcom_desdev 


http://www.macromedia.com/go/Flashcom_resources/ 


http://www.flashcom.info 


Compare this to Shockwave Multiuser Server 3 
(SMS3), which comes free of charge with Director 8.5 
Shockwave Studio. According to Macromedia, SMS3 
enables 2000 simultaneous connections right out of 
the box. With FlashCom this capacity would cost a 
whopping £11,876 (US$16,500). Of course, as we 
already said above, SMS3 doesnt offer the full range 
of features that come with FlashCom, but FlashCom 
will certainly be used to build many of the same types 
of applications, especially in the beginning. 

Macromedia has clearly set its pricing in 
comparison to other rich-media servers like Real 
Media’s Helix and in the tradition of their own now- 
discontinued Generator technology. But our 
experience as a developer trying to sell Generator 
solutions is that the price was always a major issue, 
even with global clients. It was hard enough to 
convince strict IT administrators to introduce a new 
technology into their carefully managed server parks; 
tell them they had to drop US$6000 ona server they 
weren't sure they would use more than once and more 
often than not it was Game Over. 

The dearth of large-scale Generator solutions over 
the past few years leads us to believe we weren't alone 
in our experience. And now, to some degree, we're back 
in the same boat. The question is whether, considering 
the current market, the time is now right for this type of 
pricing. We just hope Macromedia doesn't make the 
same mistake as it apparently did with Generator, and 


Connecting your digital camera to Flashis as simple as 1 2 3... okay, 4... 


stifle the market for the fantastic new FlashCom 
services before it has a chance to take off. 


Conclusion 


With the release of Flash Communication Server MX 
Macromedia moves the Internet a huge leap in the 
direction of ubiquitous, rich-media, multiuser 
applications. In the process it also transforms Flash 
from an attractive but largely isolated user 
environment into a window ona shared media world. 

FlashCom heralds a new era of exciting 
possibilities. Whether you’re a hard-bitten scripter 
or thoroughly non-technical, it should give you plenty 
of reasons to rejoice. EI 


The Communication App Inspector gives a thorough overview of 
your application while it’s running on the server, including 
details for all streams and shared objects. 


fu Make sure your camera is connected 
to the computer and open a new file. 
Open the Options menu in the upper right 
of the Library panel and choose New 
Video to create a new Video object. Drag 
the Video object onto the stage. 


Use the Free Transform Tool to scale 

the Video object to whatever size you 
like, and position it as desired. Using the 
Properties Inspector give your Video object 
the Instance Name myVideoStream. 


Open the Actions panel and insert the 

following ActionScript at Frame 1: 
myVideoStream.attachVideo(Camera.get(0 
)); This tells Flash to connect the stream 
coming from your camera with the Video 
object now on the stage. 


Choose Control>Test Movie. The 

Flash Player Settings Privacy dialog 
will appear, asking if you want to allow the 
use of your camera. Once you click Allow, 
you should see your camera's stream. You 
now have a live video player! 
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Wildform Fix 1.0 


Converting video clips to SWF the easy way 
using Flix from Wildform... 


(though Flash MX now upgrading to the more recent Pro version 
provides tools for converting really outperforms even Flash’s 
video clips into SWF format, conversion options. 
it was Wildform’s Flix With vectorised video and ultimate 
software that lead the way in this area. configuration control being the biggest 
6 The software you'll find on the cover CD selling points, the Pro version really 
S&S is an entry level version that runs offers Flash designers a few extra and 
through the most basic processes unusual tools to make their Flash work 
offering slightly more control over the flasher. Follow ourstep-by-step tutorial 
conversion than Flash might, although to find out how to get started. 


15 steps to video conversion 


We walk you through the process and show you what all those tabs offer... 


Supported formats 


Flix supports .AVI, .DV, MOV, 
.QT, MPG, WMV and .ASF video 
files plus.WAV,.MP3,.WMA 
and .AIFF audio formats along 
with a number of common still- 
image formats. 


C:A\store\flix\trailer. avi 


| [CNstore tbs trailer swf 
} | Qutput: | 
| | IC:\store \low\trailer, swt Browse. 


| Export options: [7 Export Audio I Export Video 
| 


Export options: ¥ ExportAudio ¥ Export Video 


Through a sequence of tabs, Flix allows you to Notice how the Output location settings are 
specify and configure a video file for 


automatically configured to inherit the Use the Title, Author and Description fields to 
conversion. Save the trailer.avi file to a folder on directory structure and file name while substituting embed relevant information into the first frame 
your computer and get started by finding that file's the extension to SWF. As the original contains both of the converted SWF. In this way you can identify 
location using the Browse button next to the sound and video, you need to keep both the Export your media and call the information directly from 
Input field. options checked. the Flash player if necessary. 


a 


T Unload movie at end 
J” STOP action on first frame 
T~ Insert black frame at start 


SWF Framerate (fps): [a 


Format: PCM 

Sampling rate: 44100 Hz 
i Channels: 1 (Mono) 
|) Sample size 16 bite 


| ener ee 


at 
\ Duration: 35 seconds 


7: i 


Move onto the SWF tab for options specific to 


your converted results. The three Movie The custom variable provides the opportunity mg Next it's onto the Audio tab and you're 
options should be familiar to anyone with Flash to include additional clip information that “ provided with the properties of your input 
experience, offering basic actions affecting the might interact with larger Flash movies. This isdone _—_ audio source. This is worth familiarising yourself 
playback of the file. To maintain relatively smooth by creating a variable name, determining its value with before deciding on the best settings to create 
playback, set the Framerate to 25fps. and clicking the Add button. for the Output audio options. 


Audio quality 


Here's a rough guide to audio bit 
rates: 128kBits/s is equivalent to 
CD quality; 69kbps is near CD 
quality and the setting most MP3 
files use to combine good quality 
with reduced file size; and 
64kbps is nearerto that of FM 
radio. Depending on how much 
your original video relies on its 
accompanying audio track, 
satisfactory results should be 
achieved between 64-96kbps. 


Modem speeds 


Remember that 56k modems 
rarely, if ever, connect at that 
speed, so when setting the 
Maximum bitrate option for 
this speed modem, drop it 
down to around 40kbps. This 
creates results that will 
realistically stream efficiently 
over this bandwidth. Lowering 
the audio sample and bitrates 
will also improve playback as 
well as reducing the video and 
SWF framerate. 


Sampling rate: 


Jzz0s0 Hz S| 


| Bitrate: 
(eee I=) 


T Stereo 


To consider optimising the encoded file, knock 
down the Sampling rate to 22050Hz to halve 
the original rate, and set a bitrate of 64 kBits/s to 
match a quality comparable with FM radio. Leave 
the Stereo option unchecked as the original is mono. 


Dimensions: 320 x 240 
Duration; 35 seconds 


Output frame options 
Average image quality: | 60 
1 Geeta Sinaneks Seg etunn tego 100 
{min} _— {max] 


1 Maximum bitrate (kbps): 56 


10 | Setting the Maximum bitrate in kbps takes 
another approach for the output image 
quality. It enables you to determine a specific 
bandwidth at which the converted clip will be 
targeted and lets Flix do the maths for you. 


SWF movie dimensions 
J Use custom SWF dimensions 


width | 320 
Height: | 240 


f= 


Video framerate (fps): 


Finally, the Video framerate specifies the 

number of video frames displayed per second 
in your output. A higher framerate results in 
smoother playback but at a larger file size. A setting 
of 25 should be adequate for this but, again, trial 
and error leads to the best results. 


Format: 
Frame rate: 


Average image quality: | 


8 | Finally, move onto the Video tab. Your original 
source clip's video properties are available as 
were the audio properties on the previous tab. 
Again, take a moment to understand the original 
video's settings. 


Image dimensions 
‘width 


Height: 


11 | Image dimensions specify the height and 
width of each frame image in your SWF. These 
can be specified through the relevant fields or by 
checking the Use Source Dimensions option to 
match the original clip. 


| MS MPEG 49588 V2 

| Frmerte 300 
Color depth 24-bR coer 

| Dimeniions: 320x240 


| Duane 35 seconds 


After you've completed the steps necessary to 

configure your conversion, it's worth retracing 
your steps over the available tabs to make sure you 
are happy with your settings. For example, you 
should double-check that you don't have conflicts in 
your various framerates. 


Dimensions: 320% 240 
Duration: 35 seconds 


Output frame options 
Average image quality: | 60 


 Pepramias en ere et eal Se LAT Yen 


{min} os 


[~ Maximum bitrate {kbps}: | 


Ready. Click "Encode’ to continue or press F 1 for help. 


9 | The Average Image Quality setting can be 
likened to JPG compression with higher 
settings achieving better quality but at the expense 
of file size. You may need to experiment with this 
depending on the original source, but a setting of 
50-70 is usually adequate. 


Height: 
Video framerate {fps}: 


12 Choosing to use Custom SWF Dimensions 
affects the size of your final SWF without 
changing the actual image dimensions. This can be 
useful for increasing the size without increasing file 
size, but will inevitably lead to the occurrence of 

pixelation — leave it unchecked. 


15 | Once you're satisfied with your settings, the 
only thing left to do is the actual conversion 
process, which is as simple as hitting the Encode 
button back under the File tab. A summary of the 
process is displayed and, once complete, your 
converted SWF is ready for use. 
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If Flix has the functionality you need for your Web creations, then upgrade 


| Ei ” Encoding Help 
‘Oe? @s7BIO 


| SWF | Audio | Video | Vectorize | 


File information 


Input: JE\Videos\Wildform_Video_1 avi 
Output: le :\Wideos\Wildform_Video_1.swf Browse... | Play 
Preset| | 256K MX/FLV Vid (24 kbps Audio, 218 kbps Video) ¥ Encode 


\ Link: @ OpenHTML page c 


Load SWF Movie Target: [-b Ik oa 


http: //www.wildform.com | 


Export options 
IV Export Video: “ Flash 35 


<a 


Export HTML 


< 


Export E-mail 


aa 49 


© Vector 
[EWideos\Wildfom_ VideoLhim = ~  Browse.. 
[EAVideos\Wildform_Video_1_email txt 
Export 1st frame .jpg JEAVideos\Wildfom_ Video jpg ==SOS*~S~S~S Browse... 
Export Win Projector [E:\Videos\Wildform_Video_T.exe ‘Browse. 
Export Mac Projector JEWVideos\Wildform_Video_Thgx SSS Browse... | 


@ MX © FLY [¥ Export Audio 


Browse... 


[to Flux Pro 25] 


to its big brother, Flix Pro 2.5, for just £99... 


oarguments, Flix 7.0is a 
quality piece of software. 
But if you're looking fora 
little bit more control over 
your Flash video, and you're after some 
extra features, then you should take this 
opportunity to upgrade to Flix Pro 2.5. 
For £99. You can take advantage of such 
features as vectorised video, high- 
quality Flash MX output as well as Flash 
3-5 output. You'll also enjoy an 
abundance of workflow, productivity 
and time-saving features. 


Vectorised video is certainly one 
of the most exciting features of 
Wildform’s Flix Pro 2.5. This enables 
you to automatically convert your video 
files to flattened vector shapes. The 
package offers great control over lines, 
curve fitting and colours. 

Now you can create highly stylised 
vector animations for your site without 
the monotony of tracing many bitmaps 
in Flash itself. The great thing is, you 
can edit the vectors manually in Flash, 
adding even more control. The new 


Upgrade to Flix Pro 2.5 at 


[w] www.wildform.com/flix 


Batch Encode option within version 
2.5 provides an easy way to convert 
many movie files to SWF at once, 
and the process is as simple as 
dragging and dropping selected files 
into the interface 

Other new features within the 
upgrade include watermarking options 
through overlays, new SWF functions 
such as automatic preloading, and the 
ability to stitch together two SWF files 
so they play one after the other. 
There are also new output features, 


such as Flash email, Windows and Mac 
projectors, plus encoding times that 
are up to 20 per cent faster than they 
were previously. 

So, if you want more control over 
your Flash video, and you've been 
impressed with using Flix 7.0 this issue 
(and you like the look of the Flix Pro 2.5 
demo on our cover CD), head to the 
Wildform Website now. 


UM [Studio MX and Flash MX] 


Britain's biggest-selling creative magazine . Mac 


In issue /4... 


> Digital photography How your digicam can 
work for you in print, the Web and 3D — plus 
ten mid-range cameras reviewed and rated 

> 3D skills Discover the power of Discreet’s 
plasma with our character animation 
tutorial and exclusive demo eal 


> Firstlooks 3ds max 5, Adobe ? 
Premiere 6.5 and CorelDRAW 11; 
previewed 


ONSALE AUG 15 


Illustration: Bryn Owens [w] www.bluntdog.co.uk 
Fireworks MX 
The explosive new features in Fireworks MX 
will make you go “ooh" and “ahh”... 
hy should you bother with — when you want to plan a site really z 
Fireworks when Photoshop quickly but you want it to look good too. Fireworks uncovered 
is sitting on your desktop? Chris Schmidt takes you through the 
Well, with the new basics of using Fireworks and Karl Site prototyping with Fireworks MX 
‘integrated’ features in the MX range Hodge looks at how you can use the 
there are some great things in Fireworks software to produce effective prototypes ; - ; . 
that you might miss out on if you dismiss of Websites. Gl F animations in Fireworks MX 
it out of hand. For example, now you can Another aspect of Fireworks you may 
switch between bitmap and vector never have considered is animation. 
editing without worrying about which Granted, Flash has better drawing tools, 
mode you're in. There's also a new ‘quick but creating GIFs can be easier in 
export’ button that eliminates set-up Fireworks. Our animation tutorial shows 6 Files on disc 
time and streamline workflow. you how to create basic animations, such S/ Ademo of Fireworks MXcan 
Fireworks is great as a production tool as rotating and fading text. be found gn our caver CD 
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Illustration: Kevin Davison [e] megatron01@btopenworld.com 


Fireworks uncovered 


As the borders of Macromedia's software titles 
start to blur with the MX range, we take a look 
at the explosive power of Fireworks... 


tthough Fireworks MX is 
now in its fifth generation, it 
is still often considered to 

| be the new kid on the block 
when it comes to image-editing 
software. Photoshop is well established 


and rules the roost across various media. 


Consequently, Web designers may not 
have spent time looking at Fireworks 
simply because they don't feel the need 
to spend time learning how to do the 
basics in another package. 

However, with the new MX range of 
titles come more features and tighter 
integration across the various 
applications, and being familiar with 


Fireworks just might bring Web designers 
a little nearer to that Holy Grail concept 
of a single-solution application. 

Of course, Fireworks is about much 
more than just image editing and, with 
the new MX interface, it opens itself 
up to new users by offering greater 
access to the more creative Web- 
authoring tools. 

This tutorial introduces you to the 
interface and explains how the software 
works. It shows you how to create a 
dynamic HTML drop-down menu that 
can then be exported easily into a 
Dreamweaver document, bringing a 
whole new meaning to roundtrip coding. 


Part 1: Always read the instructions 


Fireworks can be dangerous unless you know how to handle it... 


The basics 


While you get to know how 
Fireworks operates, it is all too 
easy to overlook the help you 
already have available. The 
Answers palette offers tutorials 
and advice on getting started, the 
help files are incredibly 
comprehensive. Also take a look 
at the installation CD and you'll 
find a searchable PDF file 
containing the complete 
Fireworks documentation. 


Batik sofsaccolecgal 


2 
5 


| 


In common with many other graphics 

applications, Fireworks uses a toolbar along 
the left hand of the interface providing access to 
many identifiable options. These are organised in 
such a way that selection, bitmap, vector and Web 
tools are grouped together. 


@ Create a new document when you first launch 
the software to activate many of Fireworks’ 
features. The interface now starts to come to life 
with available options becoming more apparent. 


1 HG Fenn [iS 


4 | To demonstrate Fireworks’ vector capabilities 5 | Notice the tabs on top of the main canvas 
window. These allow you to work in modes 
providing the original image or a preview of what 
your image will look like depending on your 
optimisation settings. Using the 2-up or 4-up 
settings allows you to compare different settings. 


we created the above effect using the 
rectangle tool available under the Vector tools. 
By amending the file and stroke properties 
Fireworks creates complex effects to a simple 
shape non-destructively. 


8 | Other palettes and options are available to 
you via the Windows menu but you'll 
probably find the most common to be: Optimise, 
which determines your export settings; Layers, for 
access to individual elements; and History, so you 
can retrace your steps when things don't quite go 
according to plan. 


These settings are determined by the Optimise 

@ options available among the palettes stored 
along the right of the interface. As with other MX 
titles, clicking on palette titles expands or contracts 
the contents providing instant access to a wealth of 
Fireworks features. 


The Properties window is found, as in all MX 

titles, at the bottom of the interface. Originally 
inherited from Dreamweaver, the Properties 
window provides contextual options dependent on 
the currently selected object or tool. Experiment 
with some of the tools and notice how it offers 
different possibilities as you experiment. 


~ Optimize 


> Copy HTML to Clipboard... 


G Notice also on the top right of the main canvas 
window the addition of the new Quick Export 
Button. This feature illustrates how Fireworks MX 
integrates other MX titles as Macromedia merges its 
titles towards the single-solution application known 
as Studio Mx. 


> Assets 
> Frames and History 
¥ Answers 


| Learning Macromedia 
| What's Hew. 

Readme 
| Tutorials 


@ If you're new to Fireworks and need extra help 
while you get up to speed, check out the 
Answers palette hidden away at the bottom of the 
palettes. Expand this to find out what's new in the 
current version. You'll also have access to tutorials, 
which should explain everything clearly. > 
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Part 2: Using Fireworks as a production tool 


Don't make a meal out of a menu... 


Making a hash 
of links 


Using the hash symbol (#) for 
links is a good way of adding 
links during a site's development 
when the final location is as yet 
undecided. The hash followed by 
a property is usually used in 
HTML coding to denote an 
internal anchor when linking 
within a page. This allows, for 
example, a content list at the 
head of a page to directly take 
the user down to the relevant 
area without forcing them to 
scroll through and search for the 


relevant information. 


Mx integration 


Dreamweaver and Fireworks now 
have tighter integration and 
recognise and share many file 
edits including changes to links, 
image maps, table slices, etc. 
Together the two applications 
improve your workflow 
considerably when working on 
the development of a new site 
because such changes will 

only need to be done once ina 
given location. 


Exporting to Flash 


Flash and Fireworks also share 
tight integration. You can export 
Fireworks’ PNG source files 
directly into Flash without having 
to export to any other graphics 
format. Flash offers a variety of 
options that allow you to control 
how Fireworks’ objects and layers 
are imported. 


1 | Open the topnav.png file on the cover CD to 
find an image that we've created to sit at the 
top of a fictitious Website. This comprises a 
company logo and three navigational titles to 
which we're now going to add a drop-down menu 
using Fireworks. 


4 | Select the Company hotspot and notice the 
options available in the Properties Inspector: 
type company.htm as the link, type Company in the 
Alt field providing an accessible text alternative to 
the graphic title, and ignore the Target field. Repeat 
for Products and Contact using the # symbol for the 
link properties. 


To add sub-menus to the International option 

highlight the row and click the + symbol to add 
a new row. Enter the locations shown above and 
then highlight each in turn and click the Indent 
Menu button to make these part of the 
International heading. 


If we had more space, we could, of course, 

create rollover effects to trigger the dynamic 
menu elements, but we can achieve similar results 
by using hotspots. Select the Rectangle Hotspot 
Tool and create a hotspot that completely contains 
the word Company. 


5 | To associate a pop-up menu with Company 
select its Hotspot and click the behaviour 
handle in the middle. Select the Add Pop-up Menu 
option to launch Fireworks’ Pop-up Menu Editor. 


Font: | Verdana, Arial, Helvetica, sans-serif 


8 | Clicking Next brings you to the Appearance 
tab which allows you to determine the look of 
the menu. Choose HTML cells and use the new 
Horizontal Menu option. Set the font to Verdana 
size 10 and you'll start to see some results in the 
preview pane at the bottom. 


To clone the hotspot for Products and Contact 
select the hotspot using the Pointer Tool and 
hold down Alt and Shift. This creates a duplicate 
and constrains its movement to the same horizontal 
co-ordinates. Drag this over Products and use the 
Scale Tool to resize as necessary. Repeat for Contact. 


The editor contains four tabs, which need to be 

completed. The Content tab appears by 
default and provides fields for the text label, link 
location and target for each of the links to be 
displayed. Add text as you did earlier using # for the 
link location. 


The Up and Over states text and cell colours 

determine how a mouse rollover affects the 
appearance. Set the text colour for both states to 
#333333 and use a white cell for the up state and 
the lightest grey for the over. Click Next to move 
onto the Advance settings. 


From Dreamweaver 


to Fireworks 


If you are creating a page layout 
in Dreamweaver and intend to 


a 
CellPadding 30 | Testindent: 0 | 


create visual elements in 


Fireworks later, use 
Dreamweaver MX’s new 
placeholder feature. You are then 
just one click away from 
launching Fireworks and creating 
the required image which can be 
saved to your preferred location 


and assigned to the position in 


your Dreamweaver layout. About us 


International Jobs 


As the menus are created through HTML and 

layers, many of the advanced options should 
be fairly self descriptive to anyone with a little Web- 
authoring experience. Don't panic if you aren't too 
familiar because the preview will modify as you 
experiment with your settings; when you're happy 
with your results, click Next. 


Don't limit yourself to positioning the menu 

inside the canvas area because Fireworks 
creates code using HTML layers that can be 
displayed outside this boundary in the browser. 
If you need to further edit the positioning of the 
sub-menus, click the Behaviour Handle again and 
select Edit Pop-up Menu. 


The final stage using the Pop-up Menu Editor 

decides the positioning of your menus. As our 
original graphic sets the navigation horizontally, we 
want the menu to appear below so click the 
corresponding Menu Position image. Similarly, the 
sub-menu needs to appear below so click the third 
option here. 


International) Jabs 
uxK 

thorth America 

now 


Fireworks allows you to configure a second 
browser and although the generated code is 
efficient and complies with the required standards, 
it's best to weed out any potential problems as 
early as possible. 


Clicking Done returns us to the main canvas. 
The blue grid attached to the Company 
hotspot marks the menu position — hit F12 to 
preview the effect in your browser. Inevitably you'll 
probably want to reposition the menu by simply 
dragging to a new position back in Fireworks. 


You'll need to recreate these steps for other 
15 andy 5 
navigational elements of your site such as the 
Products and Contact options in our example, but 
once you've completed the menu you're ready to 
export the graphics and code to a comprehensive 
selection of supported authoring tools. 


Part 3: MX Integration 


Exporting your work to other software... 


HTML set-up 


By default Fireworks in set up to 
create Dreamweaver-style 
HTML. If you need to change this 
to be more compliant with 


>| Copy HTHL to Cipboard 


another package, go to File > 
HTML Setup and make the 
necessary changes to ensure a 


smooth transfer of your work. 


Using the new Quick Export tool is simplicity 
itself. Once your work is ready to be sent to 
your chosen Web-authoring software use the Quick 
Export button to show your available options. 
Choose to update an existing Dreamweaver file. 


If the code was already in place, Fireworks 
would amend the existing instance, but as you 
are creating this for the first time you need to specify 
the file in which to include the feature. You are also 
asked for a location for the created image files. 


ie 


ti 
it 


1S 
3 
. 
7 
: 
: 
3 
cT 
ra 
: 
= 
H 
= 
. 
= 


i 
i 


You can now turn to Dreamweaver and 

continue with the build of your Web page 
confident that the menu will work across all 
browsers. And if further changes are necessary, you 
can simply use Fireworks’ new Quick Export tool to 
update the page on completion. EES) 
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Illustration: Kevin Davison [e] megatron01@btopenworld.com 


Site prototyping 
with Fireworks MX 


Need to turn your client's brief into something 
they can see against a tight deadline? 
Fireworks MX has the right tools for the task... 


70 | MX 


f you're one of the many 
designers out there 
scrambling for the 
diminishing pool of work 
available, you'll know that first 
impressions count. You need to be able 
to show you can do the job and, as faras 
clients are concerned, that means 
pulling together pages that can impress 
as quickly as possible. If you use 
Fireworks, you'll have a head start. 
Macromedia's combination of Web 
graphics package and authoring tool 


gives you all the power you need to 
create page layouts that work 
convincingly without having to open 
another package. 

In our tutorial we use Fireworks to 
create a page layout as a presentation 
prototype, the kind of thing you'd show to 
clients before building their site from 
scratch. Then we mock up the rest of the 
page for display in a browser, complete 
with interactive elements you can 
demonstrate. With our help you should 
be able to land that crucial client. 


Part 1: Layout design 


Fireworks is so easy to work with that you can use it like a virtual sketch pad to draw a rough layout... 


Quick colouring 


If you use the file 
colourscheme.png from the CD 
to create a scheme for your page, 
leave the window open as you 
design your layout. You can 
easily sample colour using the 
eyedropper from the colour 
scheme image. 


In this tutorial we want to create a prototype 

site that we know will have several 
components: a header containing a logo, four 
navigation buttons that lead to pop-ups, two panels 
for entering user details and a large content area. 


4 | We arrived at a classic layout, with a drop- 
down navigation bar under the header of the 
page and further navigation on the left side in a pair 
of floating panels. Now you can begin to decide on 
a colour scheme. 


We start by creating a new document at 
600x800, then go to View>Grid>Edit Grid. In 
the Edit Grid dialog, set the grid dimensions to 10x10 
and tick the Show Grid and Snap to Grid boxes. 
Change the default grid colour to a light grey. 


In many instances you'll be following the 

colour scheme of a logo or from a brief. Even 
then you need to decide where to use which colour. 
We've arrived at a handy solution. Open the file 
colourscheme.png from the Tutorial\Prototypes 
folder on the CD. 


Set the magnification of your document so that 

you can see it all. Select the rectangle tool from 
the toolbar and use it to block out where you want 
to place the key components of the page. You can 
use this stage to decide how much space to allocate 
to each element and where to place it. 
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G This PNG file is a mini-page layout, including 
most of the common components of a 
standard page layout. Go to Window>Swatches to 
open the colour palette and apply colour to the 
objects in this file. You can use this method to 
decide on a colour scheme before creating your 
‘real’ page. 


Part 2: Logo 


Use Fireworks’ drawing tools to create a logo for the prototype site... 


Close-up 


You can set the magnification of 
the current document using the 
magnification drop-down at the 
bottom of the document window. 
After you've created the initial 
layout it’s handy to be able to 
zoom in on sections as you work. 


Our next task is to develop a logo for the site, 
and that gives us an opportunity to explore 
some of the drawing tools in Fireworks’ arsenal. We 
used our block layout document to continue 
development, but you can begin this section in a 
new document with the dimensions set to 600x800. 
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Select the text tool and go to the Properties 

panel. Choose a chunky, serif font from the 
Font drop-down, set the size to 36 points and the 
colour to #FFCCOO. Make the style Bold. When 
you've finished setting up the text attributes, click 
on the stage to activate the text cursor. 
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Type in the words house share, then select the 

arrow tool. Select the words you've just added 
to the stage with the arrow tool, then go to 
Text>Convert to Paths. This changes the text to 
vector shapes. Go to Modify>Ungroup to separate 
the individual letters. > 
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Logo continued... 


Quick symbols 


Instead of dragging a new symbol 
instance from the Library every 
time one is required, click and 


drag on an instance of the 
symbol on screen while holding 
down the Alt key (Ctrl on the 
Mac). This duplicates the symbol, 
creating a new instance there 
and then. 


Marquee around the edited letters and hit 


4 | Click on the first letter in the phrase — the ‘h' — Command/Ctrl+G to regroup them. Place the 


then choose the Scale tool in the toolbar. Hover _ logo against a rectangular background, 250x70 G Select the components of the house image and 
the cursor near the selected letter until it changes to pixels, coloured #006699. The rest of our logo is group them together. Go to Modify>Symbol> 
show the Rotate tool, and rotate the letter a few made with a triangle and square, forming a simple Convert to Symbol. We'll be using the image 
degrees. Repeat the process by selecting random house shape, set against a 70x70 square coloured repeatedly throughout our design, and converting it 
letters in the logo and rotating them just a little. to #FFCCOO. 


to a symbol makes that much easier to do. 
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Part 3: Drop-down menus 
Drop-down menus are easy to add in Fireworks MX — no coding required... 


Quick Export 


In Fireworks MX you can export 
the page directly to 
Dreamweaver MX format using 
the Quick Export button in the 
top-left corner of the document 
window. You can also save the 
file for export into Flash, 


Freehand or Director. 
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Open the Library (Window>Library) and drag 
4 To speed things along a bit, open up the file over an empty part of the stage to bring up the and drop an instance of the symbol house to 


protopage.png from the Tutorial\Prototypes context-sensitive menu. Choose Insert New Button. _ the button editor. While the symbol is selected, go 
folder on the CD. This file contains a simple header You are taken to the button editor. Drawarectangle _ to the Properties panel and resize it to 15x15 pixels. 
for our document with the logo in place. We'll use at 60x20 pixels and centre it using the Align panel Go to Modify>Transform>Flip Vertical and position 
this to create buttons and insert pop-up menus. (accessible from Window>Align). the symbol on the left of the button. 
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G Select the first button and go to Modify>Pop- 


up Menu>Add Pop-up Menu. You are taken to 
conditions of the button. Use the tabs to Drag the newly created button to the light a dialog box divided into four tabbed sections. In 


navigate between states and the Copy Graphic blue strip under the header of the page and the Content section, there are three columns. In the 
button to transfer the previous image to the current position it under the house symbol. Drag a further first column, type in the menu entry you wish to 
state. Altering effect parameters is a good way to three instances of the button from the library and display; in the second, type the associated URL. In 
make subtle variations between conditions. Position them consecutively alongside the first. our example we add the names of several cities. 


Add button states for the Over and Down 
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Temporary solution 


While prototyping, the pages 
your navigation system needs to 
point to may not actually exist 
yet. To avoid getting error 
messages when a client clicks on 
the available options, replace the 
URL in links with a hash sign (#). 


HTML, or a combination of HTML and images 
to build a menu. We set ours to use HTML only, 
with text at size 12. We used the colour scheme 
we'd devised to set the Up State cell colour to 
#006699 and the Over State colour to #FFCCOO. 


Click on the Appearance tab. Here you can use 


8 | The Advanced section enables you to edit 

individual table attributes. Finally, click on the 
Position tab. Select the Set menu position to bottom 
of slice icon, the second button along, and click 
Done to finish. We added similar menus to our 
finished file in the same way. 
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a At this stage the pop-up menus should be fully 
functional. You can test them by previewing in 
your browser. To save the file as HTML at this stage 
would require inserting slice objects over the 
remaining pieces. 


Part 4: Building the page 


Mock up HTML content to mimic the look and feel of a finished site 


HTML slices 


If you include references to 
images within HTML slices that 
you plan to use at the prototyping 
stage, remember to include the 
absolute path to the file. When 
you preview ina browser, a 
temporary file is created. Any 
relative paths within your 
document will fail. 


Our intention was to use Fireworks to bolt 
gy together a prototype page, and we now 
complete this quickly by using the drawing tools to 
create sidebars. The rounded corners were created 
by drawing rounded rectangles then splitting them 
using the Knife tool. 
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In the Properties Inspector choose HTML from 
Gg the Type drop-down, then paste in the HTML 
required. You can develop the code in Dreamweaver 
and copy it direct to the clipboard. In our example, 
though, we finished off the input forms using the 
drawing tools. 


These corner pieces can then be reused 

throughout the design if they're transformed 
into symbols. Whenever a new rounded corner is 
required it can simply be dragged from the library 
and dropped at the end of a rectangle of the 
same colour. 
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The content area in our example was 
populated using sample text and a bitmap 


image. Again, Fireworks would have enabled us to 
insert HTML directly into this section. A rectangle 
could have been drawn covering the entire content 
area and then converted into a slice. 
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For the purposes of creating a page for 

presentation, we mocked up form input 
sections of the page; however, there is an 
alternative. Fireworks MX allows you to replace 
slices with HTML. Select the area you want to 
replace first and convert it to a slice by going to 
Edit>Insert>Slice. 
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G To display the Fireworks document as a 
prototype, go to the Quick Export button in 
the top-right corner of the document window and 
choose Preview in Browser from the menu. When 
displayed in your browser, the pop-up menu and 
rollover buttons work — as do interactive or 
animated elements. EEE 
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Animation with 
Fireworks 


Make Fireworks MX's basic animation 
capabilities work for you... 


he animation capabilities of 
Fireworks MX are basic 
when compared with Flash, 
but there are times when its 
drawing tools and export capabilities 
make it a better choice. The package is 
ideal for GIF animation, creating 
disjoined rollover buttons and saving 
them in an ultra-compressed format 
ready to slot into pages that will run on 
any platform. 

In Fireworks MX the animation 
process has been streamlined. The 
tweening capabilities introduced back in 
Fireworks 3 are now part and parcel of a 
centralised approach where a series of 


animation attributes can be tweaked 
through a single panel: the multifaceted 
Properties Inspector. If this level of 
control isn’t enough, you can still go to 
the Frames panel and edit animation on 
a step-by-step basis. 

Here we create animations with text, 
but the objects used could just as easily 
have been bitmaps or vector shapes. In 


the course of creating animation we look 


at making symbols from scratch, 
animating selected objects and editing 


symbols directly and through the frames 


panel. Allin all, the next three pages 
offer you a crash course in sequential 
animation using Fireworks MX. 


Illustration: Kevin Davison [e] megatron01@btopenworld.com 


Part 1: Rotating text 


In this example we use Fireworks’ Symbol Editing mode to carefully create an animation foundation... 


Valued symbol 


One of the main benefits of 
using Animation Symbols is that 
even after you've set up quite 
complex animation, you can go 
back to the original symbol and 
edit the artwork, changing fonts, 
colours - even the entire image 


if necessary. 


Create the new document that the animation 

will eventually be placed in. We'll be creating a 
banner-size set of animations, so make the 
dimensions 460x80, leaving the canvas colour 
white. With the new document on screen, hit 
Ctrl+F8 in Windows or Command+F8 on the Mac 
to make a new symbol. 
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Staying with the Properties panel for a 

moment, set the width and height of the circle 
to 50 pixels. Next, select the text tool, and while 
selected, set the font to Arial, its size to 15, its colour 
to #006699 and make it bold. 


Go to Window>Align to open the (usually 

closed) Align panel. Check the To Canvas 
button and centre the circular text in the middle of 
the canvas. Select the Scale tool from the tool bar 
and hover it near the text until the Rotate cursor 
appears. Rotate the text manually until the words 
the boys are horizontally level. 


A dialog appears. Select Animation as the 

symbol type and give it the label Rotating 
Text. Symbols are automatically added to the library 
so this will help you find it. Click OK when you're 
done and with the empty symbol canvas active, go 
to Modify>Canvas>Canvas Size. Change it to 
80x80 pixels. 
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5 | Type the phrase the boys are back onto the 
canvas. With the new text selected, hold down 
the Shift key to select the circle at the same time. Go 
to Text>Attach to Path on the main menu bar. If 
you've followed the steps correctly, the text should 
wrap around the circle. 
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Distribute: 


Draw a new circle, setting the fill colour to 

#663366 and the stroke to transparent. 
Make it 40x40 pixels and centre it in the canvas 
using the align tool. Close the symbol editing 
window — the symbol is automatically placed in 
your empty document. 


Draw a circle in the centre of the empty symbol 

canvas. Go to the Properties Inspector and set 
the fill colour to Transparent (it’s the box in the 
colour palette with a red diagonal line through it) 
then the stroke colour to black. Set the width of the 
stroke to one pixel. 
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G Make adjustments to the Horizontal Scale of 
the text in the Properties panel to make it fit 
around the circle. Setting it to 119 per cent should 
work well. The text remains fully editable even 
though it's attached to a path — you can change the 
text or even add effects at this stage. 


eworks MX - Untitled-1.png 
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4) Untitled-1.png 
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Move the newly placed animation symbol over 

to the left of the document, about 10 pixels 
from the edge. With the symbol selected, notice 
that the Properties panel changes to display a 
number of animation settings. > 
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Part 1: Rotating text continued... 


Constrained circle 


Holding down the Shift key while 
you draw any object, like the 
circle in this example, will 
constrain it so that the pixel size 
is uniform. The size of the object 
can be seen in the Properties 
panel as you draw it. 
Alternatively, you can enter the 
object size numerically when 
you've drawn it. 


To re-edit the components of the symbol you 
10 | either have to double click on the appropriate 
symbol in the main document, launching into 
symbol editing mode or select the symbol you want 
to change it the Library panel - open Properties and 
choose Edit. 


We want to apply animation to our symbol 

directly in place. In the Properties panel set the 
number of frames to 15 and the rotation of the 
symbol to 360 degrees. Make sure the Rotate 
Clockwise button is toggled. 


12 To view the animation, click on the Preview tab 
and press the Play button. Alternatively, go to 
the Optimise panel with the symbol selected and 
choose Animated GIF from the File Format drop 
down, then choose Preview in Browser from the 
Quick Export menu in the top-right corner of the 
document window. 


Part 2: Fading in 


Fireworks MX also provides you with a way to work directly with selected objects... 


Animated slices 


The finished banner does not 
have to be exported as one big 
image. In fact you can save file 
space by exporting the rotating 
text animation as a 15 frame 
animated GIF by slicing up the 
image and exporting that portion 
before completing the file. On 
completion you would then 
export the second slice as a 30 


frame animation. 


ae Continuing to work in the same document, go 
back to the Original tab if you've been in 
Preview mode. Click the First Frame button to make 
sure that you're adding new content to frame 1. 
You can continue to work on the same layer or 
choose to create a new one. 


100% (Animation Syw 


The selection on screen is transformed into an 

Animation Symbol. You'll notice a blue line in 
the centre of the symbol with dots placed 
periodically along its length. This line indicates the 
direction of movement over the selected number of 
frames with a green dot indicating the start point 
and a red dot showing the end. 
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Select the text tool and, while selected, set the 

font to Arial, its size to 48, its colour to 
#006699 and make it bold. Add the text ‘the dogs’ 
to the main document. Select the word ‘dogs’ and 
change the fill colour to #663366. 


Position the cursor over the bottom-right 

corner of the document window and drag the 
window out sideways so that a substantial amount 
of the non-canvas area can be seen. Shift-click the 
green dot on the animation symbol, and drag 
towards the right of the screen so that the symbol 
moves off the main canvas. 


With the new text selected, go to 

Modify>Animation>Animate Selection. A 
dialog box will appear offering you a number of 
animation options. We'll be adjusting most of these 
manually, but set Frames to 15 and Move to an 
arbitrary 50 pixels. 


© Frames and History 


6 | Holding Shift as you click and drag constrains 
the movement path of the symbol to a straight 
angle in increments of 45 degrees. Open the Frames 
panel and select frame 15. Shift-click on the red dot 
to position the symbol centrally in the canvas. 


Adding 
backgrounds 


Once your animation is 
complete, you can easily add 
further layers as wellas still 
elements to your image. When 
adding new layers for this 
purpose, make sure you tick 
‘share’ across frames. Bitmap 
objects or vector drawings can 
be used. 


If you click the Play button at this point, you 

should see the rotating animation you made 
earlier, and also see the new symbol slide in from the 
left of the screen towards the centre. 


8 | To make the animation symbol fade in, select it 
within the document and go to the Properties 
panel. In the section labelled Opacity set the first 
box to 0, leaving the second box at 100 per cent. 
Run the animation again to see the object slide into 
view and fade in at the same time. 


9 | Go to the Library panel and you should see a 
new object named Symbol. This was 
automatically created when you animated the text 
selection. Double click on the entry to go to the 
properties dialog for the symbol, giving it the name 
Fade In Text. 


Part 3: Reusing animated symbols 


Once Animation Symbols have been created, they can be reused with different settings applied... 


Export to Flash 


Fireworks MX gives you the 
option of exporting your finished 
animation to Shockwave Flash 
format. Click the Quick Export 
button on the document window 
and select Macromedia 
Flash>Export SWF Alternatively, 
if you have Flash, save in PNG 
format and import the file into 
Flashto make any required edits. 


Save face 


Before exporting the final files or 
files, always save a PNG version 
of the original so that you can go 
back and edit it if necessary. If 
you plan to work on the file ona 
different machine, save a version 
with the text converted to paths 
incase the required fonts aren't 
available on the new machine. 


1 | Go to the Frames panel and select frame 15. 
Open the panel menu at the top-right of the 
panel and choose Add Frames. Select After The 
Current Frame and add one frame only. The new 
frame should be selected automatically. 
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4 | Go to the Frames panel and select the Onion 
Skinning button at the bottom-left of the 
panel. Select Before and After from the menu 
options. Position the newly placed instance of Fade 
In Text so that it matches the previous frame. 
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Go to the library and drag and drop an 

instance of the symbol Rotating Text to the 
main canvas. Position it roughly where the original 
was positioned. Select frame 1 in the Frames panel 
and make a note of the X and Y co-ordinates of the 
original symbol. Return to frame 16 and enter the 
same co-ordinates for the new instance. 


= zs — = soa 
5 | With the symbol still selected, go to the 

Properties panel to edit the symbol's 
animation attributes. Set the number of frames to 7 
and the second Opacity box to 0. Finally, set the 
Scaling attribute to 50 per cent. 
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Frame 3 


Frame 4 


Frame 6 


Frame 6 
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Frame 6 


Frame 3 
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3 With the symbol selected, go to the Properties 
panel and set Frames to 15 and Rotation to 
360 degrees. Click OK when prompted to add more 
frames. Drag and drop an instance of the symbol 
Fade In Text to the canvas. 


6 | Now when you run your animation you should 
have a perpetually rotating logo on one side, 
and text that slides in from the left before fading 
and retreating into the distance... EES 
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Project: 
Builda 


virtual radio 


Time to put your skills to the test, by using Flash, 
Fireworks and Dreamweaver to build a Website... 


ver the next ten pages we get 
'@) you to build on the skills you've 
used in the previous tutorials to 
create a complete Website that 
is also a virtual radio. 

Soundclip.org is a fictitious site that we 
have built to show you how Flash, 
Fireworks and Dreamweaver can work 
together to produce a fully interactive 
Website with streaming media. 

We've used Fireworks to plan the layout 
of the site, using its prototyping features to 
get a design that we were happy with 
before we started to bring it across to 
Dreamweaver and Flash. 


You can view the finished radio Website at: 


Next we used Flash to create the ‘radio’ 
bit of the site. In this part of the tutorial we 
show you how to pullin MP3s to a SWF 
shelland use a bit of ActionScript to 
create some playback controls so that 
your visitors can be in charge of the 
streaming sound. 

The last leg of the tutorial enables you to 
create a bulletin board where your visitors 
can chat and exchange views on the clips 
they've just heard. This section takes 
Dreamweaver UltraDev (now part of 
Dreamweaver MX) and shows you how to 
build a bulletin board that uses .asp (Active 
Server Pages) technology. > 


[w] www.soundclip.org 


Forums 
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Expertise supplied by Karl 
Hodge. You can contact Karl 
at [e] khodge@spodgod.com 


Files on disc 

The files that accompany this 
tutorial can be found in the 
Tutorial\FW layout folder on 
the cover CD. 


Design the interface 
in Fireworks 


Our project begins as we compose an 
interface in Fireworks MX... 


ireworks MX combines 
& page layout capabilities 
with vector graphic drawing 
features, animation tools 
and bitmap optimisation. Dig deeper, 
though, and there are some key code- 
handling elements that make 
integration between the other MX 
tools fairly seamless. 

In this tutorial, we look at two aspects 
of the program in extreme detail. We 
recap on Fireworks’ layout capabilities 
and then take you step by step through 
the process of exporting Dreamweaver 
Libraries direct from Fireworks. The 
technique we use is designed to produce 
the cleanest code possible, with 


naturally named images - an outcome 
that was much more difficult to get with 
previous versions of the program. The 
eagle-eyed among you will notice that 
we use a slicing method that leaves no 
gaps around the edges, no spaces to 
be filled. This is because Fireworks 
exports your layout exactly as it's 
produced, with no consideration for how 
pretty the resulting code will be. That 
means you have to be extra vigilant when 
placing slices - making sure that your 
layout fills the document and that 
nothing overlaps. 

Our aim is to help Fireworks generate 
code that a human being can read. Follow 
our lead and you wont go far wrong. 


Part 1: Assembling the page 


Use Fireworks’ drawing tools and layout capabilities to put a page interface together... 


Adding edge 

You'll notice in yourfinished 
version of the layout that the 
navigation bar has diagonally 
sliced ends. These are shapes 
we cut off using the knife tool 
and duplicated from the end of 
the diagonally cornered 


rectangles in our layout. 


Importing fonts 


If you get a message asking 
whether you wish to replace the 
fonts used when you import any 
of the PNG files mentioned in 
this tutorial, choose Maintain 
Appearance. This recreates the 
paths of the original font used 


and is fine for export 


Starting with a paper-based design, we 

created logo elements and a colour scheme for 
our page layout in Fireworks. You join the process 
just as we're getting ready to create the layout 
Make a new document in Fireworks MX at 800x600 
pixels. Go to View>Grid>Edit Grid and set the grid 
to 10x10 pixels, ensuring that snapping is on 


At co-ordinates X:20, Y:160, draw a second 

rectangle that's 290 pixels wide and 20 high 
Select the Subselection tool (the white arrow) in the 
toolbar and click on the top-right corner of the new 
rectangle. You'll be prompted to turn the shape to 
vector paths. Click OK. Move the top-right corner 
point 20 pixels to the right to form a diagonal corner. 
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he Add the text ‘artists’ to the button using Arial 
Black (or Arial set to Bold with the horizontal 
scale set to 120%), the font size at 14. Centre it in 
the button with the Align panel. Click on the Over 
tab and select Copy Up Graphic. Add an Inner Bevel 
effect to the button at this stage, using the effects 
menu in the Properties panel 


i Open the file logostrap.png from the cover 
CD. Switch back to your new window and go 
to Modify>Canvas>Canvas Colour. Choose Custom 
and use the eyedropper tool to sample the 
background of logostrap.png. Switch to 
logostrap.png and click and hold the main image. 
It's a graphic symbol, so you can drag and drop a 
copy to the main window. 


5 | With the newly transformed rectangle still 
selected, go to Edit>Duplicate. Select the 
duplicate and go to Modify>Transform. Choose Flip 
Vertical then Flip Horizontal, then position the 
rectangular shape at X:470, Y:110. 


Add a Down state for the button in the same 

way, then close the symbol editing window. 
Position the button at X:360, Y:170. Drag three 
more instances of the button from the library to the 
stage and arrange them in a horizontal line. Select 
the first new instance and go to the Properties 
panel. In the Text box change ‘artists’ to ‘forums’ 


4 Position the logo symbol at X:20, Y:10. Open 
the file smalllogo.png from the cover CD and 
drag a copy of the main symbol over in a similar 
way. Position that at X:730, Y:20. At the co- 
ordinates X:20, Y:130, draw a rectangle that’s 760 
pixels wide and 30 pixels high. Go to the Properties 
panel with the new rectangle selected and sample 
the yellow colour from the logo as its fill. Set Stroke 
to transparent 


G Hit Ctrl+F8 in Windows or Command+F8 on 
the Mac to create a new symbol. In the dialog 
that appears give the symbol the name Button1 and 
select Button as the symbol type. When you click 
OK you're taken to symbol editing mode. Draw a 
rectangle 90 pixels wide by 20 high. Go to 
Window>Align and use the panel to centre the 
button on the canvas. 


9 | Change the text labels on the remaining 
buttons to ‘contact’ and ‘links’ in the same 
way. Add a simple footer to the layout by drawing 
a black rectangle at the bottom, 760x20 pixels, 
with a yellow rectangle above it at 760x10 pixels. 
Duplicate a copy of the rectangle with the diagonal 
corner and position it as shown. 
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Part 2: Export for authoring 


Tidy up loose ends and export page elements for direct use in Dreamweaver... 


Relative root 


Fireworks isn't smart enough 
to alter relative URLs when 
saving Dreamweaver Libraries, 
so you have to add the relative 
path yourself. Putting ../ at 

the beginning of the path 
points to the folder above the 
Library folder. 


Naming slices 


You don't have to name each slice 
oralter the export settings in the 
way we did — but the technique 
we used here generates images 
that have meaningful names you 
can easily find and edit in the 
future, rather than images with 


names like slice_r2_c4.gif. 


fi By now you should have a near-complete 
layout. You can continue with the file you've 
been working on or switch to our version 
sounclippartial.png. Select the logostrap symbol and 
go to Edit>Insert>Slice. When the slice is in position, 
hover the cursor over the right edge and stretch the 
slice out to 700 pixels wide 
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The final slice to be made is over the bottom 

divider. Marquee around the objects that form 
the bottom divider to select them all, then go to 
Edit>Insert>Slice to create a slice around it. The next 
thing you need to do is name the slices and add 
URLs where necessary. 


Save the file you have been working on, then 
marquee around the header elements — those 
in the top half — to select them. Go to Edit>Copy 
then File>New to create a new document. Paste the 
copied elements into the new document. Save the 
document as header.png — then go to File>Export 


2 | Next, select the slice tool in the toolbar and 
draw a slice around the small logo. Use the 


guides to position the slice exactly next to the first. 
It should be 60 pixels wide, 99 pixels high and 
positioned at X:720 Y:10. The slice after that should 
cover the top of the divider, be 720 pixels wide, 61 
high and positioned at X:20 Y:209 


5 | Select the first slice and go to the Properties 
panel. In the left corner there's a text box with 
the label Slice above it. Type in the name logostrap 
Select the slice around the small logo and name that 
one ‘smalllogo’. In the Link box for that slice type in 

/index.htm. Continue to give the remaining slices 
individual, meaningful names. 


Export 


SSSSeSeSQ. 


New Folder ) ( Add to Favorites > 


“Dreamweaver Library (ibi 
Export Slices 

GB selected stices Only 

B include Areas without Slices 

©) Put images in Subfolder 


8 | Choose Dreamweaver Library as the Save 

As type, then navigate to the folder you 
want to develop your site in. Create a new folder 
called Library and choose that as the save directory 
Click the Options button when you return to the 
original dialog, then click on the Document Specific 
tab. You'll see a series of drop-down menus that 
govern how the exported slices from your layout 
are named 


In the ‘row’ below that, our buttons have 

already been sliced by Fireworks. You need to 
create three more slices: one of 300x20 pixels at 
X:20, Y:170, the second of 40x20 pixels at X:320, 
Y:170 and a final slice of 60x20 at X:720, Y:20 


Ad Fe 


6 | Add URLs to the buttons in the same way you 
added a link to the small logo slice. Add the 
link ../artists.htm to the artists button, ../forums.asp 
to the forums buttons, ../contact.htm to the contact 
button and ../links.htm to the links button 


HTML Setup 


File Names: 
Slices: 
Slice # (1, 


None iow 
Frames 
Example: 32.gi 
Alternate Image Description: 
_ Multiple Nav Bar HTML Pages 
Exports multiple HTML files for use in HTML documents without frames. 


© include Areas without Slices 
—) 


Buse uTF-8 Encoding 


© Set Defaut 


9 | To make things as simple as possible, begin by 
setting them all to None. Then set the top left 
drop-down to Slice # and the bottom left (in the 
Frames row) to read Frame #, In the Save As text 
box, name the file header.Ibi and click Save. Repeat 
stages 7 to 9 to convert the footer into a 
Dreamweaver Library. 


Expertise provided by Chris 
Schmidt at track5. 

[e] chris@track5.co.uk 

[w] www.track5.co.uk 


Files on disc 
The PNG and MP3 files used 


in this tutorial can be found in 
the Tutorial\Flash radio folder 
on the cover CD. 


Tune in to 
Flash radio 


As part of our site, we create a pseudo Flash radio using the 
Sound object to pull MP3 files into a SWF shell... 


(though there are methods of 
A creating actual streaming 

MP3 radio stations using 

software such as ShoutCast, 
these are costly affairs in terms of 
development, hosting and management. 
Establishing both the server and client 
elements takes valuable programming 
time, but you need to ensure you have 
the right amount of bandwidth available 
for such a feature as visitors may stay 
permanently ‘tuned in’. Add to that the 
time and dedication needed to create 
constantly new broadcast material and 
you lL start to realise the amount of work 
that’s involved. 

What we're creating over the next few 
pages is a budget alternative based 
around a larger and more flexible model 
being developed by track5 that plays 
back a sequence of MP3 files. We only 
have enough room to show you the 
basics involved in pulling MP3 files from 
outside of the controlling SWF with 
some elementary playback controls, 


although the principle can be easily 
modified so that not only the sound files 
are being referenced but also any 
supported content. 

To minimise repetitive stages, we have 
only two tracks playing on our playlist, 
but you'll easily see how this can be 
expanded to include as many tracks as 
you find necessary. 

By using standardised filenames for 
the sound, copy and imagery, it’s possible 
to develop the principle here to allow the 
average client to have full control over 
the track listing and playback order 
without having the slightest 
understanding of either HTML or Flash. 

As with all streaming formats, the user 
will benefit from more stable playback 
through a broadband connection. 
However, by using the Sound object 
model, we can easily read the sound 
properties so that tracks will play all the 
way through before moving onto the 
consecutive MP3 file regardless of the 
width of their pipe. > 


MX 
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Part 1: Importing Fireworks 


With a design already produced in Fireworks, you need to import the elements and keep their identities... 


Credits 


The MP3 files used in this 
tutorial, which can be found 

on the cover disc, have been 
kindly provided with permission 
by track5 clients Joanna 
MacGregor and The Brodsky 
Quartet. Please respect their 
copyright and only use the clips 
as part of this tutorial. 

The clips used are taken from 
Joanna MacGregor’s new 
SoundCircus release ‘Neural 
Circuits’ (SCO08) and from the 
Brodsky Quartet's latest CD of 
Britten and Tchaikovsky String 
Quartets (CC72106) . The 
former can be bought from 

[w] www. soundcircus.com 

and the latter from [w] 
www.brodskyquartet.com. 


rt | We've been given the Fireworks interface.png 
file from the site designer to use the basic 
layout and buttons for our radio. Open the file to 
discover the file dimensions of 200x150 pixels. Then 
create a new file in Flash matching these dimensions 
and matching the background colour. 


File Structure: ©) Import as movie clip and retain layers 


© Import into new layer in current scene 
Objects: ©) Rasterize if necessary to maintain appearance 
© Keep all paths editable 
Text: © Rastetize if necessary to maintain appearance 
O Keep all text editable 


Ci import as a single flattened bitmap 


(ed lesen) | 


Notice how each element has been imported 

as its own symbol in Flash’s Library. Go 
through each item and rename it to something a 
little more descriptive than the default filenames. 
Then create similarly named layers for each symbol 
to isolate each object. 


Import the interface.png file into Flash via 

File>Import and choose the options as above to 
retain the existing symbol status and keep paths 
editable. Click OK to continue. 


Part 2: Loading and detecting external sounds 


Create the SWF shell that references external MP3 files and recognises when they've finished playback... 


The Sound object 


The Sound object is a Flash- 
defined class whose methods 
control the playback behaviour 
and whose properties help 
control its timing. You need to 
create the Sound object by using 
a constructor function to provide 
its identity. When the Sound 
object is named, it is then 
possible to use it to play and 
modify sound files that you 
associate with it. 


e Edit View Insert Modfy Text Control Window Help 


Add frames to these layers extending the 

timeline to frame 10. Create a new layer, call 
this Actions and drag this to the top of the layers 
order. Select the first frame of this layer, open the 
Actions panel and include a Stop action. 


Name Layer § 


[loadSound : Download a MP3 sound. 


Object: track! 


Batametets: | “neural.mp3", tru 
(URL, isStreaming ) 
+- PUD 


step()? 
trackl = new Sound()? 


4 | To load and play an external sound choose 
Objects>Movie>Sound>Methods>loadSound 
and enter the name of your sound object: track1. In 
the parameters field enter the path to the 
neural.mp3 file as neural.mp3. The true attribute 
specifies streaming properties. 


» AcoOnS - trame 

[fe] Actions for Frame 1 of Layer Name Layer & 
® Actions 

Ba) Movie contro! 

GR) Srowsermnetwork 

LB) Movie ctip Contrat 


B) variavies 
@ delete 


@® setvariadle 


| set variable : Set a variable 


@ vw 

@® win 
[BD ConditionstLoops 
Ba Printing 
[Bi User-Defined Functions 
GB) Miscetaneous Actions 


LB) Overatrs 


With frame 1 of this layer selected you need to 


create a global sound object by choosing With the Value field selected from the previous 
Actions>Variables >Set Variable. In the Variable field 


step, choose the Objects>Movie>Sound>new 
enter the name track1 and click the value field. 


Sound option and check the Value expression box. 


track2 = new Sound(); 
track2.loadSound("brodsky.mps", true); 


Sy] [line 50F 3; Col 26. 


G Create a keyframe in the Actions layer at frame 

— — 10 and copy the script settings you've just 

8 | Test your movie and you should hear the track completed. You can manually edit these through in 
playing back. As soon as your movie begins, it the Actions’ panel Expert Mode setting so that all 

creates a Sound object, then loads the MP3 file into track1 entries become track2. Revise the MP3 

it and plays. filename to brodsky.mp3 as above. 


With two individual keyframes calling back 

the external MP3 files, you need to create an 
event that detects the end of playback and sends 
the timeline to the next clip. Select the first frame 
and choose Objects>Movie>Sound>Events> 
onSoundComplete. 


| eto - Go to the spectied frame of the move 


OGoto and Play @Gotoand Stop 


‘Scene: <current scene> 


(Seen 
Type: | Frame Number 


Erame: 10 


+ - PRD 


stop(}: 

tracki = new Sound{); 
trecki.loadScund({"neural.mp3", true}; 
tracki.onSoundComplete = function{) ! 


In the Object field, enter the name of your 
mM Sound object, track1, to associate the clip with 


the command. Then add a Go To and Stop command 


pointing to frame 10 in the current scene. 


‘eck? .loadSound(*brodsky.mp3", true): 
eek? .cnScundComplete = function() { 
gotoandStop (4): 


Repeat this step for the equivalent keyframe at 
frame 10 changing the Sound object info to 
track2 and the Go To and Stop command pointing 
back to frame‘. Test your movie and the clips 
should then play back-to-back on completion. 


Part 3: Controlling playback 


Add standard playback controls for stop and play, and allow the user to move forwards and backwards 
between tracks... 


Play it again Sam 


After you stop a loaded sound, 
there are two methods of making 
it play again, depending on 
whether the sound file has been 
synchronised to an event or 
streamed. Streaming sounds 
must be reloaded with the 
loadSound () method. Event 
sounds, however, must use the 
start () method. 


Going round in 
circles 

If a sound is looping, the 
onSoundComplete event is 


triggered when all the loops 
have finished. 


stopp: 

stopAliSounds{): 

treokl = new Sound{jr 

trecki.loadSound(*neurel.mps*, t| 

tree®l .cnSonndComplere = functia| 
gotoandStop (ib): 

ts 


| + Properties 


Back in the Actions layer at frame 1 place 

an instance of Actions>Movie Control> 
stopAllSounds after the initial Stop value and 
before the script loading the sound file. Repeat as 
step 7 above. This ensures tracks don't play over 
each other if the user skips tracks with the controls 
we are about to add. 


Assigning values to the Play button is a little 

more complex as you need to ensure you don't 
activate a duplicate sound clip. As the Play button 
will be used after playback has been stopped — and 
the Stop button has cancelled the loaded sound — it 
must be configured to load the sound again. 


‘Gy Aetions for [No instance name assigned) (stop) 


@® stopaiisounds 
[BJ BrowseriNetwork 
(BY Movie Ctip Controt 
(BJ variables 


[J Conditionsi.oops 
I erintioa 


Properties 


Next select the Stop button and assign an 

m® onRelease event handler embedding the same 
stopAllSounds command as we added in the 
previous step. There is no need to add further 
keyframes to the Stop layer as the same command is 
relevant at all stages of the movie. 


Actions for [No instance name assigned] (play) 


With the Play button selected at frame 1, 

mM create a standard onRelease action followed by 
an Actions>Movie Control>stopAllSounds action to 
cancel any playback that may be currently 
streaming and avoid a duplicate. 


7 Actions - Hutton 


1 For No instance name assign 


‘tion A] | tests hav te te speciteel tenet the mere 
[BD Mowe contrat 
S@ p00 
@- 
BS vm 
@ 109 
@ sropansounds 
1B etorseinvereon 
(B veiecip Comes 
(1) Yoisties 


[BD Condionsiicors 


| tee 2 panne en C30), 


Adding commands to the Next and Previous 

Mi buttons in the Controls layer is a simple case of 
specifiying Go To and Stop frames for the relevant 
tracks. Add a keyframe at frame 10 to provide 
buttons back to the first or any subsequent tracks. 


Variable: ‘wack! 


Value: “new Sound() 


+-2RG 
} 
on (release) i 


G Next you need to create a global sound object 
within the play button by choosing 
Actions>Variable>Set Variable and entering track1 
as the variable and Objects>Movie>Sound>new 
Sound as the value, remembering to check the 
Value expression box. > 
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Controlling playback continued... 


on (release) { 
sStopAliSounds (): 
track2 = new Sound(); 
track2.icadSound("brodsky.mp3", true)? 


on (release) ¢ 
trackl = new Sound(): 


To associate the external sound choose 8 | 
Objects>Movie>Sound>Methods>loadSound keyframe at frame 10. Then, either run 


and enter the name of your sound object, track1,in _ through the previous two steps or manually edit g Test the movie again making sure all the 
the object field. The parameters field requires the the script from frame 1 through the Actions pane! buttons function as expected, no duplicate 
path to the neural.mp3 file using the neural. mp3, Expert Mode to reflect the correct track, file and sound clips are played and the tracks move onto 
true command. frame references. each other consecutively. 


Part 4: Getting interactive 


Provide basic listings on currently playing music and offer links to more information... 


Flach MX. fra 


Insert Modify Text Control Window Help 


So far you have the functionality and playback "3 Bring the neural.jpg and brodsky.jpg images 
controls in place. You now need to add into your movie from the CD via the 


information displayed with each track offering basic File>Import option and add these to the library as Add the button containing the neural.jpg image 
details on the current track playing. Create a new button objects. For each button leave the Over and into the first frame aligning the image button 
layer called ‘info’ adding keyframes to frame 1 and Down states clear creating keyframes in only the Up _ with the top and centred within the movie. Replace 
frame 10. and Hit states. this with the Brodsky image button at frame 10. 


: ied 
Today, 3:35 pm 
Today, 3:36 pm 
Today, 3:36 pm 
Today, 3:36 pm 


on (release) { 


4 | By adding a simple GetURL action to the 


image button we're effectively making the To integrate the radio into the main site, you G 


You can then prompt the radio to be displayed 
artwork into one big button that can prompt a need to copy the SWF and MP3 files into the 


in a pop-up window matching the dimensions 


regular HTML page. This provides more detailed same directory because this is how the relative of the SWF file. This allows the radio to be left 
information about the track or CD than is possible locations of these independent files are specified playing in the background without being too 
through the minimal radio interface. from the shell Flash radio. visually intrusive. 
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Forums 


B You must reaister or login to he forum. 


ADD POST 
8/6/2002 


vowing topics 1 to § of 5 


This is the first post from Eric 
But I can't think of anything to say 
This is what I meant to say before 

Yada yada Yada yada Yada yada Yada yada Yada yada 


yet another post 
One day I will think of something interesting to write here 


This is another post 
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit armet, Lorem ipsurn 
dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit 

amet, Lorem ipsum dolor sit amet. Lorem ipsurn dolor sit amet. Lorem [— 
ipsum dolor sit amet, Lorern ipsum dolor sit amet, Lorem ipsum dolor 
sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet. 
Lorem ipsurn dolor sit amet, Lorem ipsum dolor sit amet. 


This is a post 


Blah blah blah here are many good pre-built 


solutions available for adding your 
own discussion groups, forums or 


Expertise provided by lan bulletin boards, most of which are 


6 Files on disc : : 
Anderson of zStudio, zStudio / Thefiles needed to support shareware and will cost just a few dollars to 
is anew-media consulting this tutorial can be found in license once you've evaluated them. However, 
eis jai ueun ae the Tutorial\DW bulletin one of the problems is that they can be too 
has folder on the cover CD. i , 
and training to designers and comprehensive for what you need 
agencies. Feedback, Dreamweaver MX incorporates the dynamic 
questions or business F data publishing features of Dreamweaver 
enquiries are welcome. \ UltraDev. Using these, we create a simple 


[e] ian@zstudio.co.uk 
[w] www.zstudio.co.uk 


a: 4.48 > ty 


bulletin board that offers all the functionality 
needed while avoiding unnecessary complexity. 


Building the 
| bulletin board 


In order to make the site more interactive, we build 
a simple bulletin board where visitors can leave 
messages for other people to read... 


Here we use Microsoft Active Server 
Pages as the dynamic page technology and 
Microsoft Access as the database, simply 
because these are the easiest to host and the 
most widely available options. If you're using 
different technologies, you should still be able 
to follow most of these steps. The tutorial 
assumes you're using a Windows PC with 
Personal Web Server or IIS enabled. If you're 
on another platform, you'll need to set up 
your application server according to the 
instructions provided by Macromedia or 
your software vendor. 


Part 1: Setting up the system to work with dynamic data 


Copy the site folder to the computer, publish it and set up a data source... 


tle at Yew Pores Toe a 
eo. 9 ae Go S| ie 
|. Beck Forward cI Search Folders Hstorr tone T. 
hires 


sa 


|_soundelips_start 


[E Documents end Seting: Van Andietson’\WMy Doce 


BK 4 


16 Calnte Orde 


Select an tem to ww ks desorption. Cubrary 
See oto 

Cocuments 

Meier’ Paces 

Ye Commer 


2 First, you need to publish the folder with 
Personal Web Server or IIS. This can be installed 
from your Windows CD. Choose Advanced, then set 
up a virtual directory called soundclips, pointing at 
your copy of the soundclips_start folder. This makes 
the folder available by pointing your browser at 

[w] http://localhost/soundclips 


i Copy the folder called soundclips_start from 
the CD to your computer. This folder contains 
copies of all the files created in the previous 
tutorials. If you wish, you can replace these with 
your own versions. This folder contains the site we'll 
be working with. 


DataSource Name [iSmialan 
Description: 


Database: 
Database: C:\.,.\big project\torum site\forum. mdb 


Select. | Create. | Hepais Compact. | 


© Nore 
© Database: 


fe Database 


Create an ODBC data source name (DSN) 

pointing at the Access database in the site 
folder. Open the ODBC control panel, choose 
System DSN, Add, then choose Microsoft Access 
Driver (*.mdb) and click Finish. Select the 
forum.mdb data file in the soundclips_start folder, 
and name the DSN ‘forumDSN'. 


Part 2: Setting up Dreamweaver MX 


The first thing to do when starting any project in Dreamweaver is to set up a site... 


Local Info 


Servet Modet |ASP VBScnpt | 
This ste contains: [Dreamweaver MXPage On =] 
Teesling Serves Folder, [C Documents and Settinge\lan Ander 


FV Reftesh Remote File List Autornaticaly 


Site Name: [soundclips site 
Local Root Folder: |r arts\CAS36\big project\soundclips_start\ (C9 


I Reftesh Local File List Automatically 


Default Images Folder. | a 


HTTP Address. [rep i 


This address enables the Link Checker to 
ae HTTP links that refer to your own 
fe. 


URL Prefie [hitp:/Aocalhost/soundclips/ 


Launch Dreamweaver, and choose Site>New a! Choose the category Testing Server on the left, 
Site. In the Site Definition dialog, click the and then choose ASP VBScript as the Server 

Advanced tab. In the Local Info category, enter the Model. From the Access list menu, choose 

name soundclips site, and browse to your copy of Local/Network. In the URL Prefix field, amend it so 

the soundclips_site folder for local root folder. that it reads http://localhost/soundclips. Click OK. 


Data Source Name (DSN) 


Connection Name: |forumCONN 


Date Source Name (Osh): |= ~ | 


User Name: | 
Password: | 


Dreamweaver Should Connect: ( Using DSN On Testing Server 
@ Using Local DSN 


In the Application panel group, bring the 

Databases tab to the front. If necessary, create 
anew untitled document to make the options active. 
Check the first three steps have ticks beside them, 
then choose Data Source Name (DSN) from the plus 
menu, name it forumCONN, and choose forumDSN 
from the list of DSNs on the system. Click OK. 
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Part 3: Creating the forum page 


The forum page will be a simple results list, created using a Recordset to query the database and a Repeat 


Region server behaviour to repeat the latest entries in a list down the page... 


Keep your files 
together 


Remember to always keep your 
files fora Web project in one 
folder, and set this up as a site 
within Dreamweaver. Doing this 
helps Dreamweaver to manage 
the site, and prevents annoying 
warning messages. 


fe Open forums.asp. In the Application panel 
group, switch to the Bindings tab. From the 
plus menu, choose Recordset. Enter the name 
topicsRS. From the Connection menu, choose 
forumCONN. Check the Table menu is set to posts, 
and that Columns: All is selected. From the Sort 
menu, choose postDate and Descending. Click OK. 


[corsens 
Forums 


Open the new Recordset by clicking on the 

small plus sign beside its name, and click in the 
left hand orange cell on the page. Click on posttTitle in 
the Bindings palette and click Insert at the foot of the 
palette. Click after the title and press Shift-Return to 
enter a line break. Insert a placeholder for postText 
under the title, then add one for postDate to the top 
right orange cell and one for postAuthor to the lower 
right orange cell. Make the title and date bold. 


Highlight all the orange cells by carefully 

dragging through them with the mouse, then 
switch to the Server Behaviours panel. From the plus 
menu, choose Repeat Region. Ensure that topicsRS 
is selected and set Show to 5 Records at a Time. 
Preview the page in a browser using F12. 


Part 4: Creating a page for users to post messages 


This page inserts a new record into the Posts table, which adds a new entry to the bulletin board... 


Microsoft Access 
2000 database 


The database for this project was 
created in Microsoft Access 
2000, but has a very simple 
structure. You should be able to 
create it in another ROBMS if 
you need to. The data structure 
consists of two tables; here are 
the field names and Access data 
types: PostspostID — primary 
key, autonumber, postlitle — Text 
field, postText — Memo field, 
postAuthor — Text field, postdate 
— Date/Time field with auto- 
insertion of current date 

Users; userlD — primary key, 
autonumber, username — text 
field, password — text field, 
email — text field 


¥ Properties 


fi sJ HiddenField 
postAuthor 


Walle [c24=Session("MM_Usemname"~> | 


1 | Open post.asp. Inspect the form; there are two 


text fields, one named postTitle and one 
named postText. Click beside the button at the 
bottom of the form and choose Insert>Form 
Objects>Hidden Field. In the Properties, name it 
postAuthor and for Value enter the following code: 
<%=Session(" MM_Username")%>. This will label 
all messages with the author's login name. 


‘Sonmcion! fforurc Onn =] pene. | 
Inwert Into Table! [pests = 
Ar Ireertng, Go To: [Forums 220 (Bowes ] 


Gat Vohows From: form =] cwtwe scbmind 


Form Ewemartss PooctText nserts nto cokenn “post Text” (Text) 
postAuthar riserts nto coksnn “postauthor” (Text) 


‘Ceheen:: [post Tele 3} Submit Ass [Test J 


In the Server Behaviours palette, choose Insert 

Record from the plus menu. From the 
Connection menu, choose forumCONN, and select 
‘posts’ for Insert Into Table. Enter forums.asp in 
After Inserting, Go To. Check that postTitle, 
postText, and postAuthor are all inserting into 
columns of the same name, and click OK. 


Preview the page in a browser by pressing F12. 

You can't try inserting information though, 
until you have constructed a login page and logged 
into the site. This is because the page is trying to 
write the login name into the database but, as you 
haven't yet logged in, the field is empty. Sending 
the form results in an error message at the moment. 


Part 5: Creating a subscription page 


The subscription page allows a new user to register to post messages on the site. Add a new user to the 


Users table in the database, and check to make sure that their chosen username is unique 


Form validation 


Ina production site, it would 

be essential to apply 
Dreamweaver's form validation 
to the insert forms to ensure that 
the required fields are 
completed correctly. 
Dreamweavercan check that 
fields have been completed, and 
that email addresses are ina 
valid format. 


a Open register.asp. Inspect the form, and you'll 


see three text fields named username, 
password and email address. In a real site, you 
would ask the user to enter their password twice 
(and you'd write JavaScript code to check that the 
two entries matched) but we'll omit this step to 
keep the example simple. 


Inaart into Tables [users | 
After Iraerting, Go To: [username accepted. asp 


Get Values From: [form1 J chen Submis) 


Form Elements: 


password inserts into cokumn 


sword” (Te: 
jemallinserts into column “email” (Text) 


‘Column: [username =] scbmn as: [Text =| 


In the Server Behaviours palette, choose Insert 

Record from the plus menu. From the 
Connection menu, choose forumCONN, and select 
‘users’ for Insert into Table. For After Inserting, Go 
To, enter username_accepted.asp. Check that 
username, password, and email are all inserting into 
columns of the same name, and click OK. 


eo In order to ensure that users have unique login 
names, get Dreamweaver to check for 
duplicates. From the Server Behaviours palette plus 
menu, choose User Authentication>Check New 
Username. Check that username is selected for 
Username Field, and enter username_exists.asp for If 
Already Exists, Go To. Click OK, and try out the form 
using F12. If you enter the same username on two 
separate attempts, it will reject the second instance. 


ES Pee es ee Se eS 


Part 6: Protecting the post page and allowing users to log in 


We have decided that users should sign in before posting, which offers a limited measure of accountability. 
Create a login page, then protect the post.asp page from being viewed unless the user is logged in... 


Nuisance post 


Requiring the users to register 
before posting cuts down on the 
level of nuisance posts that could 
be experienced, but it doesn't 
really provide proper 
accountability. In production 
sites, we often implement 
systems where the password is 
automatically generated and 
emailed to the recipient. This at 
least gives the site administrator 
one valid email address for the 
poster, and is useful for marketing 
purposes, It still doesn't prevent 
malicious posting, since anyone 
can sign up for free Web-based 
email, but it increases the hassle 
factor that discourages casual 


mischief on bulletin boards. 


tes, looks Mel 


a Open forums_login.asp. From the Server 
Behaviours palette plus menu, choose User 
Authentication>Log In User. Check that ‘username’ 
and ‘password’ are selected for Username Field and 
Password Field. Choose forumCONN for Validate 
Using Connection; choose ‘users’ for Table; set 
‘username’ for Username Column and ‘password’ 
for Password Column. For If Login Succeeds, enter 
post.asp. For If Login Fails, enter accessdenied.asp. 
Click OK when you're done. 
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Restrict Based On: @ Username and Password 


Username, Password, and Access Level 


Select Level(s): 


If Access Denied, Go To: accessdenied.asp 


G Open post.asp. From the Server Behaviours 
palette plus menu, choose User Authentication> 
Restrict Access To Page. For If Access Denied, Go To, 
enter accessdenied.asp. Click OK. 


How the 


8 | That's it — view the site in your browser by 
going to http://localhost/soundclips. You 
should be able to try out the radio, navigate the 
site, register for the forum and post messages. 
You can also view the finished site at [w] 
http://www.soundclip.org. 


project was 
brought together 


To produce the site, we used Dreamweaver MX, 
which offers superb integration options with bo 
Flash MX and Fireworks MX... 


nce the design had been finalised 

in Fireworks, the next step was to 

optimise and export it. In this 

case, we chose to export from 
Fireworks as Dreamweaver library items, one 
for the header and one for the footer. Doing 
this offered a great way of easily keeping the 
artwork up to date. 

Within Dreamweaver, we used the Library 
items as part of the construction of a 
template, and used the template as the basis 
of the pages within the site. Templates allow 
the entire layout to be controlled, rather than 
just the individual parts of the page that can 
be controlled using Library items. Using both 
together in this way offers incredible design 
control with very little work. We also used 
Cascading Style Sheets, so that the 
appearance of the type can be controlled 
centrally, independently of the templates. 

The Flash movie was imported into a new 
HTML document that had the same 
background colour as the rest of the site, and 


the page margins set to zero to prevent the 
unattractive page border showing up. We 
then used Dreamweaver's Open Browser 
Window behaviour to launch the HTML page 
in a new window. The point of doing this is to 
be able to control the width and height of the 
new window precisely. 

When using the Open Browser Window 
behaviour, we had to apply it to a link in the 
page that would act as a trigger, but we didn't 
want the main window to do anything when 
the link was clicked. One way to prevent this 
is to create a link that consists of a hash (#), 
but this means that non-JavaScript browsers 
cant access the content. Instead, we chose to 
link to the Flash page, but to disable the link 
using JavaScript. This means that everyone 
can access the content; JavaScript users get 
the new browser window, while non- 
JavaScript visitors will receive the content 
in the main window. 

And that’s pretty much that for our virtual 
radio project — happy developing! ca-s 
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Computer Arts Special 

100% Flash - COSB0031 

This issue covers all things Flash, 
including a massive 30 pages 
dedicated to Flash MX. Also in this 
issue: 38 pages of hot new 
tutorials, covering video, 
screensaver creation and handheld 
game design; 101 Flash tips; the 
new powers of Flash's coding 
language, ActionScript; an in-depth 
seven-page review of Flash MX; and 
a free 36-page Flash sampler book 
from Friends of ED. 

CD Flash MX demo (dual), Flash 5 
(dual), plus £300 of extras from 
Graphicscene and Web Foundry. 
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Computer Arts Special Digital 
video techniques — COSB0032 
This complete 100-page guide to 
digital video provides you with all 
you need to master creative editing, 
effects and movie making. Included 
in this issue: 50 hot camerawork 
tips; the best hardware and 
software guides; 25 pages of 
essential tutorials, from colour 
retouching to titling; learn how to 
make a claymation film in Premiere; 
and a guide to what's hot in the 
new releases on the DV scene. 

CD A full version of EditStudio 1.5 
(PC), plus demos including After 
Effects 5.5 and combustion 2. 


Computer Arts Special Design 
brilliant Websites - COSB0033 
In this L00-page guide to Web 
design, we show you how to design 
better Websites. Included in this 
issue: in-depth reviews of 
Dreamweaver MX and Fireworks 
Mx; create sites that sell; learn all 
there is to know about PNG; and 11 
brand-new tutorials on lip-synching 
in Flash, setting up a Web server, 
creating Flash components and 
using Web Menu Builder, 
Dreamweaver MX and GoLive 6. 
CD A full version of Web Menu 
Builder (PC), 1510 Photo-Objects, 
plus demos including GoLive 6. 


arts arts specialBACk ISSUES 


Computer Arts Special 
Photoshop — COSB0034 
Included in this 100 per cent 
Photoshop issue are eight brand 
new tutorials. These cover painting 
in PS7, amazing scanning tricks, 
Photoshop's top 12 filters, and 
create the the cover image with our 
tutorial on special colour and print 
techniques. Also in this issue, 54 
expert tips, learn all there is to 
know about Photoshop PDFs and 
an in-depth hardware guide to help 
you choose the right equipment. 
CD The full version of Dreamy 
Photo (dual) with the complete 
DreamSuite plug-in, PS6 demo. 


Computer Arts Special Get 
started in digital art - COSB0035 
This 100-page issue gives you a 
complete overview of the digital 
creative scene, including beginner's 
guides to: illustrating in Photoshop 
7, Painter 7, Illustrator 10; Web 
design with Dreamweaver MX and 
Flash Mx; Flash animation; creating 
3D graphics in Bryce 5, Poser 4 

and D Sculptor; print and 
multimedia design using InDesign 2 
and Director 8.5. We also show you 
how to use ActionScript. 

CD The full version of D Sculptor 
plus demos including Flash MX, 
Dreamweaver MX and Bryce 5. 


Issue 70 — Code CA070 

Think Big 

CD Full Flash Toolbox Lite (dual), 
Flash MX demo, DeBabelizer 5 Pro. 
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Issue 71 — Code CA071 

Turn any object into digital art 

CD Full D Sculptor (PC), Maya PLE, 
Dreamweaver MX and Fireworks MX. 


Issue 72 — Code CA072 
Photoshop 7 tricks 

CD Dreamweaver Mx, Fireworks 
MX, Toon Boom Studio 2, Poser 4. 


Issue 73 — Code CA073 
Cutting-edge Flash 

CD LiveStage Pro 2.1 (full), Flix 1.0 
(full), Flash MX, After Effects 5.5. 


+44 (0) 1458 271 108 
tlon — see page 53 
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Issue 74 —- Code CA074 

Digital Photography 

CD Demos of the exciting new 3D 
tools Plasma and trueSpace 6. 


This is your chance to sul 
£54. You'll get every issue delivered to your address, and more 
importantly, you'll save £24 on the deal. Phone our hotline today! 


Computer Arts Specials are certainly hot property — 
you'll find all the best techniques and tools for a variety 


of computer art disciplines: 


- 3D graphics - Flash - Dreamweaver - 
- Digital video - Web design - Photoshop - 


Each issue comes complete with a dual-format CD. 


Simply call our hotline, email us, or fill in the form on the right. 
(A photocopy will do) 


} Make even greater savings 
by subscribing to 


Computer Arts too! 
Turn to page 52 for details. 


uK: 0870 444 8455 


or order online: www.computerarts.co.uk/subscribe 


(W YES! | want to subscribeto Flatt 1s 


Cut out or photocopy and retum this coupon 


Daytime telephone number 
Email address 
13 Special issues 
UK (cheque/credit card) [] £54 save £24 


Europe (including Eire) (1 £73.53 
Rest of the world” LJ £86.53 “AIRMAIL 


Please choose your method of payment 1, 2 or 3 


1 (_] Cheque (payable to Future Publishing Ltd. Sterling cheques drawn on a UK account.) 


2 OVisacr [J MasterCard 


Issue No/Valid date 


3 L] Switch 


Card No aires 


Signature. Date____ 


UK readers return this coupon (no stamp needed) to: Computer Arts Magazine, Subscriptions, 
Future Publishing Ltd, FREEPOST BS4900, Somerton, Somerset, TAT] 6BR. 


Overseas readers return (postage payable) to: Computer Arts Magazine, Subscriptions, 
Future Publishing Ltd, Cary Court, Somerton, Somerset, UK TAT1 6TB. 
i | Please tick this box if you would prefer not to receive information on other offers. 


Order ae: 


Overseas: +44 1458 271100 
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Illustration: Matthew Harvey 


MX's extended family 


We bring you 20 of the best extensions for Dreamweaver, 
Fireworks and Flash Mx... 


ne of the main attributes that 
helped Dreamweaver dominate 
the market was its extensibility. 
j Developers have long been 
creating additions to the software that 
can be as easily removed from the 
hosting application as they can be 
installed through Macromedia's free 
Extension Manager software. The 
principle behind the Extension Manager 
soon spread to Dreamweaver's 
stablemate titles with extensions now 
available for download from the Exchange 
sites for Fireworks and Flash too. 
However, with the adoption and 
integration of previous UltraDev and 
HomeSite tools in the MX upgrade, there 
have been fundamental changes to the 


Dreamweaver AP| that have meant not 
all existing Dreamweaver 4 extensions 
can be guaranteed to function as 
anticipated. The JavaScript compiler was 
upgraded to become stricter than its 
predecessor and, for this reason, code 
that was considered valid before is now 
flagged as invalid. 

This has meant that many extensions 
authors have to revise their existing work 
to ensure compatibility with the new MX 
range while early MX users need to be 
more specific in their search criteria 
when looking for extensions on the 
Dreamweaver Exchange site. Naturally, 
Macromedia is making sure all internally 
and externally developed extensions are 
compatible with the MX range and soon 


this shouldn't be an issue. 

We've compiled 20 of the best 
extensions for Dreamweaver, Fireworks 
and Flash that are guaranteed to work in 
the MX environment. You may have used 
some of them before, but others will be 
new to you. By maximising the potential 
of what might be your most frequently 
used applications, you'll soon be pushing 
the boundaries of your work further and 
creating better and more efficient 
Websites while having the ability to 
provide many features that you may have 
previously considered beyond your 
potential and experience. 

For access to hundreds more freely 
downloadable extensions take a trip to 
www.macromedia.com/exchange. > 
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Dreamweaver MX extensions 


Ten of the top Dreamweaver MX extensions... 


CourseBuilder 


Author: Macromedia 
Platform: PC and Mac 

URL: www.macromedia.com/ 
coursebuilder 


Providing a comprehensive 
range of ready-built educational 
tools, the CourseBuilder 
extension allows instructors and 
academics to create interactive 
learning applications using 
readily identifiable formats that 
can be simply dropped into 
place and populated as 
necessary. The user’s answers 
are collected and summarised 
and can be sent back toa 
dedicated tracking system such 
as Lotus Pathware orto a 
standard database. 

Tests can be created from the 
most basic true/false principle 
to complex logic puzzles that 
not only judge a user’s response 
but also track their movements 
onscreen, time out a question, 
or respond to an interaction 
through multimedia or logic- 
based responses. 

Content is created through 
standard HTML, DHTML and 
JavaScript needing no extra 
plug-ins, although Director, 
Authorware and Flash elements 
can be included easily. There's 
full and comprehensive 
documentation and although 
getting started is intuitive 
enough, the scope of the 
extension makes it necessary. 


Learning Site 


Author: Macromedia 
Platform: PC and Mac 
URL: www.macromedia.com 


The Learning Site extension 
provides templates for 
complete instructional 
Websites with integrated 
navigation and tracking tools. It 
also offers features you can use 
to assemble a training activity, 
such as a quiz that combines 
pages from multiple sources, 
including Authorware, the 
CourseBuilder extension, Flash 
Learning Interactions and 
Shockwave movies. 

With Dreamweaver MxX it is 
now possible to use the 
included Active Server Pages 
(ASP) and Microsoft Access 
database to track the results of 
multi-page interactions. This 
provides a method of 
monitoring student activities in 
a simple server-side database. 
Forthe site author there is a full 
range of lesson administration 
and configuration tools along 
with a variety of layout and 
design styles for academics who 
may not be too confident with 
their design skills. 

Although this extension is 
compatible with the MX range 
there are, at the time of going to 
press, problems with running 
this software on Windows 98 
and ME so keep an eye on the 
Dreamweaver Exchange site for 
an updated version. 


1 Choice/eButtonz 
e-commerce 


Author: ebuttonz 
Platform: PC and Mac 
URL: www.ebuttonz.com 


Incorporating all the usual 
e-commerce features such as a 
shopping cart, secure payment 
processing, stock control and 
postage calculation, the 
eButtonz extension provides 
all the tools you need to 
provide online sales facilities 
on your site. 

eButtonz makes itself 
available in Dreamweaver MX 
as an extra Insert tab providing 
easily configurable tools that 
can be added and modified to 
suit your site design. As one of 
the most comprehensive 
e-commerce extensions, 
eButtonz is proving to be a 
popular download from the 
Exchange site; and although it’s 
possible to include it into your 
site without incurring costs, this 
is at the expense of banner 
advertising which can be 
removed for a fee. 

It's always worth spending 
time researching the 
configuration of the account 
and gaining familiarity with 
such a tool, but with complete 
control of your account and 
extensive online help it will only 
be a matter of time before you 
are trading online. 


Flash Expression Panel 


Author: Neil Clark 

Platform: PC and Mac 

URL: http://dynamic.macromedia. 
com/bin/MM/exchange/main.jsp? 
product=dreamweaver 


This extension takes its name 
from the fact that it is contained 
within a Flash movie rather than 
offering specific expression for 
working with Flash files. 

The panel itself is a useful 
little scripting accessory which 
can help both novice and 
experienced coders to create 
the right syntax when inserting 
common expressions into their 
code. The tool is accessible 
either through a free-floating 
window offering a truncated 
and hierarchical structure to 
command methods oras a 
contextual right-click addition 
when working directly in 
code view. 

Dictionaries are included for 
ColdFusion and Dreamweaver 
API although there is the ability 
to add new dictionaries by 
creating a new XML dictionary 
document. This can be added to 
the dictionary.xml file to be 
available in the Flash-based 
tool from within Dreamweaver. 


DMX Tidy 


Author: Daniele Ugoletti, 

PaulR. Boon 

Platform: PC only 

URL: http://dynamic.macromedia. 
com/bin/MM/exchange/main.jsp? 
product=dreamweaver 


Using Dreamweaver's built-in 
Clean Up HTML tool offers a 
few standard options for 
configuring the way your page's 
code is organised. Add to this 
the Clean Up Word HTML 
feature and you've got a fairly 
effective range of tools for 
keeping your code efficient 
and manageable. 

However, for more serious 
coders working in XML and 
XHTML or those who prefer to 
use Dreamweaver as an 
extension to HomeSite, these 
options might seem a little 
lightweight when set against 
their expected requirements. 
DMxX Tidy is based on the same 
author's existing and 
established extension, HTML 
Tidy, and takes this a good few 
levels further offering not only 
HTML options but also covering 
options more suitable for the 
pro-coder. 

At the time of going to press 
there is only a Windows version 
of this extension available, 
although a Mac OSX version is 
listed as being available shortly. 
Keep an eye on the Exchange 
site for the latest on this useful 
little coding tool. 


Layout Designer2 by PVII 


Author: A. Sparber and G. Jacobsen 
Platform: PC and Mac 
URL: www.projectseven.com 


Working with layers is a grey 
area for many design-based 
Web authors. Figuring out the 
basics of HTML is one thing, 
adding a little JavaScript is 
another; but dabbling in the 
logistics of DHTML is something 
most designers tend to pass 
onto their coding colleagues. 

The Project Seven team has 
a selection of extensions all 
compatible with the MX range: 
layer effects from the common 
drop-down menu and more 
complex effects such as those 
made available through Layout 
Designer2. Using this extension 
you can automatically position 
one or more layers relative to 
other layers through a unique 
stacking feature. Layers can be 
aligned to layers that were 
previously screen aligned to 
build complex designs. 

The behaviours are designed 
to be applied to the <body> 
tag’s onLoad event allowing the 
script to set up the positioning 
when the page first loads. 

Detailed instructions are 
available on the PVII site. 


Macromedia Extension Manager 


Cube Stores Designer 


Author: Cube Stores 
Platform: PC and Mac 
URL: www.cubestores.com 


Cube Stores provides a suite of 
development tools that enables 
the creation and customisation 
of a virtual store. As with most 
e-commerce extensions, you'll 
need to configure an account 
through Cube Stores. Most of 
your development tools are then 
available as a series of icons 
through a dedicated Insert tab 
with additional features 
accessible via an additional 
Cube Stores menu entry. 
Creating a store is relatively 
straightforward and can be done 
ina matter of minutes, although 
a little experimentation will be 
needed before you are 
confidently adding products or 
configuring your shopping cart 
properties. Once you've 
mastered the basics, there is a 
comprehensive selection of 
design tools that will improve 
general integration of the store 
into your existing site design. 
Tutorials and help files 
are available online at 
[w] www.cubedesigner.com. 


Favourites Menu 


Author: Macromedia 
Platform: PC and Mac 
URL: www.macromedia.com 


The Favourites Menu functions 
rather like your browser's 
Favourites or Bookmarks, in that 
you can flag often amended 
files for instant access. 

Site authors managing 
multiple sites will find this tool 
of particular value as you can 
include files across multiple 
sites for quick and easy access 
without needing to switch to a 
particular site and root out the 
specific file. Using the 
Favourites Menu you select the 
file from your predetermined 
favourites, make the necessary 
changes and upload through the 
file's integrated file management 
tools. This means that if you are 
in full flow on the development 
of one site and receive an urgent 
request to change another site’s 
news page, this can be done 
quickly without losing speed on 
your existing work. 

It’s not currently possible to 
group favourites within folders, 
but maybe this is something the 
Macromedia team will consider 
in the next version. 


Snippets Tool Kit 


Author: Myhyli 
Platform: PC only 
URL: www.blueidea.com/user/myhyli 


Coders frequently working with 
Dreamweaver MX Snippets 
may find that their predefined 
bits of code can get lost in the 
depths of their hard drives if 
not managed carefully. 
Operating rather like mini 
extensions, snippets can also 
be downloaded from various 
developer sites and brought 
into Dreamweaver to provide 
functions that may be too 
specific to merit a dedicated 
extension. 

On the flipside, developers 
creating snippets that they wish 
to export and make available 
online for others need also to 
delve deep into their hard drives 
to weed out their work. 

Using the Snippets Tool Kit 
you can easily import, export 
and search for the .csn files that 
are the actual snippet objects. 
With support for unlimited sub- 
directory searching, you can 
specify a relatively high level 
directory as a starting point and 
leave the tool kit to do the 
tedious work for you as any non 
.csn files are ignored. 


The latest 1.5 version of Macromedia’s Extension Manager software is provided free with the MX titles or can be downloaded directly from the 


Macromedia Website. 


Using the software couldn't be easier: the drop-down menu at the head of the interface provides access to any other compatible MX titles that you 


may have installed. A list of installed extensions is visible in the top pane with descriptions being available below. 


You can easily enable or disable extensions to keep your hosting applications interface clean or delete them entirely if you find one that doesn't suit 


your purposes. 


WebAssist PayPal 
eCommerce Toolkit 


Author: WebAssist 
Platform: PC and Mac 
URL: www.webassist.com 


PayPal has become a well- 
established method of 
transferring funds for individuals 
and small businesses through 
the likes of online auctions such 
as eBay. WebAssist has created 
what must be the simplest 
e-commerce tool using PayPal 
to pin it all together. Although 
the store owner must have a 
PayPal account, customers can 
purchase goods without 
necessarily signing up. 

The extension itself provides 
an additional Insert tab with 
three options that can be added 
to existing pages. A single 
payment button allows visitors 
to simply click and buy an 
object while the Add To Cart and 
View Cart buttons provide 
functions as you would expect. 

The benefit of this method is 
that the functional buttons are 
minor additions to your site and 
can be added to an existing 
catalogue easily. This leaves 
complete control of the look 
and feel of the site to you. > 
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Flash MX extensions 


Five leading Flash MX extensions... 


HandyTape Component 


Author: Igor G. Ermolaev 

Platform: PC and Mac 

URL: http://igorermolaev.narod.ru/ 
htape/ 


This is a useful tool that 
produces customisable ticker 
tape effects based on external 
xml documents or data sets 
prepared using the HandyTape 
custom user interface. 

This common feature can be 
added through the HandyTape 
extension in the form of an 
additional Flash component 
simply by dragging and dropping 
it onto your main movie canvas. 
You can then resize and position 
the element and easily 
determine the content, motion, 
formatting and behaviours of the 
effect through a sequence of 
easily customisable steps in its 
own dedicated Ul. 

The only limitation is that a 
mono-spaced font needs to be 
used to reduce irregular kerning 
patterns, although it could be 
argued that these fonts create a 
more realistic ticker tape effect. 

Effect examples can be found 
on the Website, while the 
extension itself includes all the 
necessary documentation. 


PHPDataGlue 


Author: Ritesh Jariwala 
Platform: PC only 
URL: www.actkid.com 


Arguably, the principal upgrade 
feature found in Flash MX is the 
evolution of the application's 
technical potential, and with 
each version of Flash having 
more and more scripting 
capabilities there is a growing 
need for merging the design and 
technical elements into a 
cohesive whole. Many old 
school Flash designers are not 
overly familiar with coding 
principles and likewise many 
programmers are inexperienced 
with the primarily visual aspects 
of Macromedia’s maturing 
interactive software. 

The PHPDataGlue extension 
acts as a middle ground 
between your SWF file and a 
mySQL database driven site 
using PHP There are a number of 
predefined parameters although 
an experienced programmer 
might use this as a starting point 
while they become familiar with 
integrating database elements 
directly into a Flash movie. 

The included readme txt file 
should help you get started. 


Macromedia Exchange Sites 


MP3 Volume Control 


Author: Pete The Chop 
Platform: PC and Mac 
URL: www.gilldesign.net 


Using the Sound Object is a 
relatively easy way to reference 
external MP3 sound files into 
your main Flash file without 
bloating the resulting SWF to 
unusable proportions. However, 
creating a dynamic volume 
slider involves lengthy and 
tedious scripting to create 

what is, in this context, a 
standard feature. 

With the MP3 Volume 
Control extension installed, an 
additional component is made 
available that can be dragged 
into place and associated to the 
playback of an external file 
brought in dynamically using: 


mySound = new 
SoundQ;mySound.loadSound(‘u 
rl’, isStreaming) 


Although the default slider isn't 
too pretty to look at, it can be 
easily broken down into its 
individual library elements and 
revised to suit the look and feel 
of your site. 


Fdatahandler 


Author: Roland Schaer 
Platform: PC and Mac 
URL: www.rolandschaer.ch 


Another programmer's tool with 
similarities to the PHPDataGlue 
extension, the Fdatahandler 
extension is used to list data 
from different sources such as 
XML, txt or databases. It was 
created to simplify listing 
downloads and it features 
setDataProvider, 
setClickHandler, modifiable 
template, hidden button and 
page number support as well as 
simple animation effects as part 
of the process. 

Make sure the version you 
download is at least v1.0.4 as 
this fixes a few bugs over 
previous versions as well as 
providing animation that is more 
efficiently optimised. Take a trip 
to the author's Website at 
www.rolandschaer.cch if you're 
unsure that the Macromedia 
Exchange version is up to date. 

Little documentation is 
provided with the extension 
although sample files can be 
downloaded from the author's 
Website if you want to take the 
‘suck it and see’ approach. 


Your Extension Manager software is useful for providing quick access to the Macromedia Exchange Sites, where all the extensions are available 


for download. 


The Exchange is no longer the preserve of the Dreamweaver user: we've looked at a few Fireworks and Flash extensions over these Pages but users 


of old Allaire titles ColdFusion, HomeSite and JRun can also find scripts, applets and extensions. Although you may need to do a little detective work 


as Macromedia gets it site organised with the integration of these titles and the new MX range, there’s a wealth of downloads available that will expand 
the potential of your favourite software tools. 


Pixelogic 
Components Set 


Author: Scott Mebberson 
Platform: PC and Mac 
URL: www. pixelogic.org 


With broadband Web 
connections becoming 
increasingly established, the 
theory goes that including a 
preloader or progress bar will 
become less common as users 
will be downloading content at a 
similar streaming rate to 
playback. In reality, the fatter 
the bandwidth the more 
extravagant designers become 
with their online work, and 
developing new effects takes 
preference over making sites 
more efficient. 

It would seem the progress 
bar will therefore be a constant 
feature when visiting certain 
sites, which is where the 
Pixelogic Components Set will 
at least save a bit of time. 
Instead of developing yet 
another standard feature, you 
can bolt one into place via an 
extra component and then 
spend more time making your 
final SWF that little more 
efficient for the rest of us. 


Fireworks MX extensions 


Five explosive Fireworks MX extensions... 


onePixelBevel 


Author: Solar Dream Studios 
Platform: PC only 
URL: www.solardreamstudios.com 


With the current trend for pixel 
art, the bevel is one of those 
love or loathe effects that is 
starting to make a comeback 
simply because there is very 
little you can do to add depth to 
a flat 2D image with one pixel. 

This little extension from 
Solar Dream Studios creates 
such a bevel effect by creating 
the necessary shading around an 
object without exceeding the 
one pixel limit. Applying the 
effect is simplicity itself: select 
an object and choose the 
Commands>SolarDream 
Studios>onePixelBevel option 
to automatically create the 
bevel. Adapting the colours and 
other elements which determine 
the bevel used can be done by 
selecting the affected object 
and modifying the settings in 
the Effects window of the 
Property Inspector. 

This extension provides a 
little more control than 
Fireworks’ built-in bevel tool; so 
if pixels are your bag, you might 
want to check it out. 


Colour Glow 


Author: Edoardo Zubler 
Platform: PC and Mac 
URL: www.aftershape.com 


The Colour Glow Extension is a 
photo retouching effect that 
adds colourise and glow effects 
to selected parts of an image. 
The main advantage of using this 
particular tool for this purpose is 
that it uses a non-destructive 
process by creating the effect on 
a separate layer, leaving the 
original image intact. 

To obtain the best results, 
this extension should be used 
with variable tone images which 
might be best optimised 
ultimately into jpg format, 
although some interesting 
results can be obtained on more 
flat colour imagery. 

There is little control over the 
results as the extension 
provides a sequence of 
predefined steps, but the results 
can be impressive and effective 
in the right setting. 


Beyond Extensions 


Filler Text 


Author: Nathan Pitman 
Platform: PC and Mac 
URL: www.dovelop.com 


Any experienced Web designer 
will tell you how clients have 

a knack of having a great idea 
for how their site will impress 
their own particular market and 
then remaining incredibly mute 
when it comes to actually 
populating your page designs 
with useable copy. 

The designer's favourite bit of 
copy tends to come into play in 
the form of the old Lorem Ipsum 
text which has traditionally 
been used to give the 
impression of how a page will 
be laid out with copy in place. 

This neat little extension 
provides the copy for this 
through Fireworks’Window 
menu options. If you have the 
kind of client who doesn't 
understand the purpose of the 
latin temporary text, you’re even 
given options for copy in plain 
English which states quite 
clearly that this is temporary 
text that is to be used for 
placement only. If that isn'ta 
subtle enough hint, we don't 
know what is. 


Bend 


Author: Kleanthis Economou 
Platform: PC and Mac 
URL: www. projectfireworks.com 


The Bend extension for 
Fireworks distorts a path by 
adding a bloated or spiked effect 
to it. You may be more familiar 
with the Bend Xtra feature in 
Macromedia Freehand or the 
Punk and Bloat plug-in of Adobe 
Illustrator, both of which do the 
same kind of thing. There are 
other similarities with the 
/llustrator plug-in variant in that 
they are both dialog base 
providing more effective control 
of the results. 

The dialog prompts allow 
changes to the path’s tension 
points and direction as well as 
allowing you to determine the 
strength of the effect and which 
areas it should be applied to or 
excluded from. 

The effect is not just limited 
to paths created via the pen tool; 
it can be just as easily applied to 
any selection created using 
Fireworks’ vector tools. It can, 
however, only be applied to a 
single path, open or closed. 


Extensions are just the tip of the development iceberg. Downloading tools that other users have created might help provide a few more features and 


expand your personal skill base on a practical level, but it can be all too easy to take this for granted without understanding what is going on under 


the bonnet. 


By regularly visiting the Macromedia Designer and Developer Centre, [w] www.macromedia.com/desdev, you can take part in discussions, follow 


tutorials or browse through topics that will expand your skill base in a more hands-on way. After all, the people who create the extensions are the 


software users themselves, and that should include you. 


Soft Glamour 


Author: Edoardo Zubler 
Platform: PC and Mac 
URL: www.aftershape.com 


Like the Colour Glow extension, 
Soft Glamour is another photo 
retouching effect. This is 
intended to enhance image 
quality by giving the effect of 
using a camera with a soft focus 
filter applied. The effect is non- 
destructive because it’s created 
on separate layers from the 
original and leaves the original 
image untouched and available 
for future editing if you need to 
undo the effect with minimal 
consequences. 

It’s pretty much a single-click 
process to create the effect, 
but you can tweak the final 
settings for each of the layers 
fora little more control over the 
final results. 

Although the original 
purpose of this extension 
might be a little too specific, 
there are alternative uses that 
could be beneficial — for 
example, you could use Soft 
Glamour for softening non- 
detailed areas of large jpg 
images to reduce file size. FEES 
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In issue 37 of Computer Arts Special... 


3D on the Web 


Tutorials for all the major 3D software including: 


Discreet Plasma 
Learn basic 
modelling, lighting 
and export 
techniques with this 
brand new package 


Swift 3D 


Create interactive 3D 
objects and upload 
them to the Web 


PLUS 


Commotion: How to build a 3D 
fantasy landscape 


Axel 1.5 — New! 


Make the most of 
the new features in 
version 1.5 of this 3D 
modelling software 


Shockwave 3D: We teach you the 


basics of creating an interactive 
3D Web game 


ALSO 


- Explained: the confusing world of Web 3D platforms and export formats 
- 30 tips on how to create professional 3D Web elements 
- Enter our competition to win a copy of Discreet Plasma 


Reserve your copy today 
O Nn S a le Th U rs d ay 2 6 September Ask your newsagent to reserve 
walicnzinte or deliver your copy of 
Updates at [w] www.computerarts.co.uk OME recov tack 
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Introducing... 


eMac, Apple’s most affordable G4 comp 


Introducing eMac 

Apple designed eMac after talking to teachers and 
students about what they most wanted in a computer — 
features and attributes like a PowerPC G4 processor, 

a T7inch flat CRT display, an all-in-one design, and 

lots of useful applications — at an affordable price. 

And then something happened. The phones started 
Tinging. All from people of all ages demanding to know 
when they could buy an eMac for their home. Well, 

We're pleased to announce that the answer is “now.” 


All under one roof 

John Lewis department stores not only stock the award- 
Winning Apple iBook, iMac and Power Mac Gé4 series, 
but in fact any Apple product, including a wide range 
of displays, printers, scanners and other accessories, 


Satisfaction guaranteed 

As well as the John Lewis Teputation for quality and value 
{0 give you peace of mind, we offer a free 2-year guarantee 
with every Apple computer as standard* 


* See in store for details 


Combined with service 

Our after-sales support service is designed to make your 
John Lewis experience even more positive. For example, 
the availability of installation professionals to help you 
Set up your Apple computer and a free local delivery 
Service that saves you the hassle of carrying your 
purchase home yourself 


Apple trained 

Regular customers know that they can talk to 
knowledgeable, helpful staff at John Lewis. That is why 
We ensure that our sales staff are fully trained by Apple 
On an ongoing basis, so you can rest assured that you 
will get the best product to suit your needs. 


If you want to know more, then visit your nearest 
John Lewis shop, 


uter is now available to home users 


Available at selected branches of 


John Lewis 


wwwjohnlewis.com 


combustion 2 } . 


paint, animate, composite 


create beyond 
belief 


o the NT & Mac desktop, allowing artists more 


creative freedom than ever before. combustion 2 provides artists with unified paint, 
animation and 3D compositing in a 146 bit environment for seamless visual effects 
echnology for rotoscoping, motion tracking, keying ‘Big 


creation. With award-winning t 
and colour correction combustion 2 has powerful new film tools, faster compositing y 


and an integrated 2D particle system. The powerful "artist" interface lets you stay 
um speed and creativity. If 


focused, and the new open GL support gives artists maxim 
you need the best in desktop compositing and effects tools, let combustion 2 take you 


| beyond convention. Visit www.discreet.com for more information. 


combustion” 2 brings powerful effects t 


discreet 


ONSCREEN ONAIR ONLINE™ 
2002 Autodesk, Inc. All rights reserved. 


Discreet is a trademark of Autodesk, Inc. in duct names or trademarks belong to their respective holders. ec 


the USA and/or in other countries. All other brand nai 


